How to use hover effects on images
Posted By : Vikas Pundir | 30-Nov-2017
In this structure of our grid we use figures with some items and each item contain a figure element. The figure contain an image and a figcaption of some text elements and with link :
<ul class="grid cs-style-1">
<li>
<figure>
<img src="images/1.png" alt="img01">
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<!-- ... -->
</figure>
</li>
<!-- ... -->
</ul>
The CSS effect:
We usea common styles for all the figures . Firstly, we define the styles for the grid and list items that are used in the containers of our figures. We add some padding for a image tha are used in a div and define the maximum width. Text should be alinged in center .
We use
.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}
We make a list items display as inline-blocks will allow us to center them be applying a centerd text-align to the parent.
After that reset the margins of the figure elements and set position is relative. Thefigcaption position will be absolutely , so we need to make sure it will do so inside of the figure:
After that reset the margins of the figure elements and set position is relative. The
.grid figure {
margin: 0;
position: relative;
}
The image will have a maximum width of 100% which will come in handy when we define a media query to resize the list items:
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}
The figcaption positioned will be absolutely . But by default it positioned will be in the top left corner. We won’t define any width or height here as we will do so in all the individual styles. Add a background colour that will be transprante and also define some padding.
The image width should be of 100% which will use in responsiveness when we use media query for resize the list items:
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
And after that, define some styles for the text elements and the link:
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}
.grid figcaption span:before {
content: 'by ';
}
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
Example:
Forexample we will start a very simple effect. In this example we want the caption to fade in and move a bit to the right and down, so we creating the illusion of a 3D layer that comes out of the image.
For
.cs-style-1 figcaption {
height: 100%;
width: 100%;
opacity: 0;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
}
And We also use a transition and set the backface-visibility to hide and avoid a jump in the text rendering after the end of the transition.
On hover we set the opacity to 1 or 2 and translate the figcaption a bit:
.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
opacity: 1;
transform: translate(15px, 15px);
}
Additionally, and we will set the position of our text elements:
.cs-style-1 figcaption h3 {
margin-top: 70px;
}
.cs-style-1 figcaption span {
display: block;
}
.cs-style-1 figcaption a {
margin-top: 30px;
}
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vikas Pundir
Vikas has a good knowledge of HTML, CSS and JavaScript. He is working as a UI Developer and he love dancing and painting.