<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin
=
"anonymous"
>
<
style
>
/*setting the properties for container
which contains the image */
.container {
margin-top: 5px;
}
/*setting the properties for title*/
.title {
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
/*setting the properties of
content within the image*/
.content {
position: relative;
width: 90%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
/* rgb(0,0,0) indicates black and
the fourth parameter is the opacity */
.content .content-overlay {
/*setting 0.8 to 1 will turn the overlay opaque*/
background: rgba(0, 0, 0, 0.8);
position: absolute;
height: 99%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
/*transition time and effect*/
-webkit-transition: all 0.4s ease-in-out 0s;
/*transition time and effect*/
-moz-transition: all 0.4s ease-in-out 0s;
/*transition time and effect*/
transition: all 0.4s ease-in-out 0s;
}
/* setting hover properties */
.content:hover .content-overlay {
opacity: 1;
}
.content-image {
width: 100%;
}
/*setting image properties*/
img {
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*transition time and effect*/
-webkit-transition: all 0.3s ease-in-out 0s;
/*transition time and effect*/
-moz-transition: all 0.3s ease-in-out 0s;
/*transition time and effect*/
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"content"
>
<
div
class
=
"content-overlay"
></
div
>
<
div
class
=
"content-details"
>
<
h3
class
=
"content-title"
>
GeeksforGeeks
</
h3
>
<
p
class
=
"content-text"
>
Hover out to view image
</
p
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>