<div class="col-sm-4 col-md-4">
<img alt="Pozting thumbnail" class="center-block img-responsive" src="http://placehold.it/360x274">
<div class="title-project text-center">
<h3 class="text-white text-center">Swapps</h3>
<p class="text-left">Swapps is a software developing company for web and mobile devices, which creates disruptive products, focused on innovation.</p>
<a class="btn btn-primary" href="#">Read more</a>
We define the initial properties to our class, they’re almost the same styles we used in the previous post but in this case we are not going to use the start class.
padding: 10px 20px;
Now we need to do the animation in CSS3, so we will rely on the following properties:
The hover selector is used to select elements when we pass the mouse over them, and apply properties only in that case .title-project:hover will be activated when we mouse over an element with that class, so we can user the animation property to generate animations. We need to give to this property the name of animation that will be created and the time the animation will last.
It’s important to use these properties: animation-fill-mode: forwards, which will force the animation to stay in its final position, in this case the final position is bottom: 228px. Another important property is animation-iteration-count: 1, which indicates the time that the animation is going to be repeated while we keep the cursor above of the element.
Last, we will create a mymove animation, and the keyword @keyframes is responsible of creating the animation. This rule use two parameters, from that indicate the origin of the animation, and to that indicate where it will go, we will assign the value bottom in both cases.
Note that in CSS3 we need to use prefixes, to ensure cross-browser compatibility, in this case the prefix used is -webkit-, it will work in Google Chrome, Safari and Opera.
For view the result: