CSS Image Gallery

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

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad