It is said that a picture is worth a thousand words. An image conveys a lot more than words but an interactive image with some extra glitter will make the user experience amazing. Earlier, images were displayed without much modification or if anything was done, it was done using JavaScript. JavaScript helped provide basic effects but never gave rise to creative ideas as it was difficult to implement. But, with the advent of CSS3, designers could deliver better experience with little effort as the implementation became easier.
In this post, we are going to enhance the viewing of an image by providing information and links on hovering mouse pointer above it in a beautiful way. Checkout the demo here.
The demo involves no Javascript. It has been done using only CSS3. Before explaining in detail, introduction of transition and transform will be helpful.
Transition (CSS3) helps in defining the action time. Suppose some CSS styling is to be changed and the effect has to take place in a particular amount of time, it is defined using transition.
Many other features like transition-delay, transition-duration etc can also be specified for more customized actions and animations. We begin by declaring simple HTML tags.
Transform (CSS3) helps in changing the original position of an element without disturbing the attributes like width , height, margin, padding and other CSS elements. It has options like translate, scale, skew, rotate, 3D transitions etc. It is intuitive and easily understandable while looking at the code.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="hove hove-first">
<img src="pic.jpg" />
<div class="mask">
<h2>Title</h2>
<p>Your Text</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</body>
</html>
It has a div with hove class and its subsidiary. Inside this div, the img tag with the image to be displayed, title, introductory text and link to 'Read More' is specified. We begin defining our css by structuring the basic design elements of the div.
.hove {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #ffa no-repeat center center
}
.hove .mask, .hove .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.hove img {
display: block;
position: relative
}
.hove h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 2, 0, 0.8);
margin: 20px 0 0 0
}
.hove p {
font-family: Arial, serif;
font-style: italic;
font-size: 15px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.hove a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
We then proceed on to define the change in CSS when the mouse is away from the image, i.e., in non-hovering state. In this part, we will also define the transition time of such states if the change occurs while hovering.
For image, we define the transition to be linear and to be done in 0.2 seconds (without any acceleration).
.hove-first img {
transition: all 0.2s linear;
}
On hover, the div has a different background color with the animation speed accelerated in the beginning and slowing down at the end which is specified by ease-in-out option all to be done in 0.4 seconds.
.hove-first .mask {
opacity: 0;
background-color: rgba(124,100,9, 0.7);
transition: all 0.4s ease-in-out;
}
Note: The opacity has been set to 0 because these are the effects which has to take place when the image is hovered.
Similarly, other properties are also defined.
.hove-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.hove-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.hove-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
translateY changes the position as specified.
We have defined the the final and initial CSS styling with time and speed specifications too. The next step is the initiation of animations. This event will be handled by hover handler of CSS3. We now define the hover properties.
The box shadow will change and its color too. Note that the time for this transition has been specified already (0.2s) with ease-in-out effect.
.hove a.info:hover {
box-shadow: 0 0 7px #000
}
Similarly, the image is scaled to 110% of its size.
.hove-first:hover img {
transform: scale(1.1);
}
Now we make visible all the elements by setting the opacity to 1. On un-hovering the opacity changes to 0 once again.
.hove-first:hover .mask {
opacity: 1;
}
.hove-first:hover h2,
.hove-first:hover p,
.hove-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
The animation is given more effects by delaying the transition by some time for 2 elements using transition-delay option.
.hove-first:hover p {
transition-delay: 0.1s;
}
.hove-first:hover a.info {
transition-delay: 0.2s;
}
The image will animate as soon as you hover over it. We learn that defining endpoints, animation speeds, timing and little imagination can create wonderful effects on an image. Certainly the image says a lot more tempting user to read more on the subject. We will come back with more effects.
The complete code at github. If you have any issues, feel free to leave a comment below.