CSS Image Gallery - O Level (NIELIT)

An attractive image gallery can be designed using combination of CSS properties like border, border-radius, height, width, margin, text-shadow, box-shadow etc.

<html>
<head>
	<style>
		h1{
		text-align:center;
		text-shadow:03px 03px 7px white,04px 04px 8px black;
		}
		img{
		height:300px;
		width:300px;
		margin:15px;
		}
		.type1{
		box-shadow:5px 5px 10px red;
		border-radius:20px 50px;
		border:1px solid black;
		}
		.type1:hover{
		opacity:0.7;
		border:5px solid green;
		border-left:15px solid green;
		border-radius:40px 20px;
		box-shadow:5px 5px 08px green, 15px 15px 12px coral;
		}
		.type2{
		box-shadow:5px 5px 10px blue;
		border-radius:50px 20px;
		border:1px solid blue;
		}
		.type2:hover{
		opacity:0.7;
		border:5px solid coral;
		border-right:15px solid coral;
		border-radius:40px 20px;
		box-shadow:5px 5px 08px green, 15px 15px 12px coral;
		}
	</style>
</head>
<body>
	<h1> Image Gallery </h1>
	<p> Move mouse over the image to see effects and click on the image to see it in full 
	mode. </p>
	<a href="quote.jpg" target="_blank"><img class="type1" src="quote.jpg"> </a>
	<a href="quote-freedom.jpg" target="_blank"><img class="type2" src="quote_freedom.jpg"></a>
	<a href="quote-funny.jpg" target="_blank"><img class="type1" src="quote-funny.jpg">
	</a>
	<a href="quote-happy.jpg" target="_blank"><img class="type2" src="quote_happy.jpg"> </a>
	<a href="quote-kindness.jpg" target="_blank"><img class="type1" src="quote_kindness.jpg"> </a>
	<a href="quote-love.jpg" target="_blank"><img class="type2" src="quote-love.jpg">
	</a>
	</body>
</html>

Programs

Create a basic webpage showcasing "Responsive Web Design"

View Solution