Simple CSS3 Effects 2#

Here comes part two of my tutorial for small but mighty css effects with which you can pretty up your websites!

Move an object at hover over a different object

 

Here you can see an example link, in which the logo swings to and fro when you hover over it.
To influence an elemt inside another object via hover you first need to arrange the elements as follows:

<a id="link" href="#">
<div id="link-content">
< h3>Link < img id="pic" class="..." src="http://bseven.bplaced.net/..." alt="" /> < /h3>
< /div>
</a >

I created a div with the id “link-content” inside the link with the id “link”. In the div there is the link title “Link”, together with an image inside a single title tag, since title tags force a linebreak. First, I define the elements visually. The background, the round edges and the size of the button are defined in “link-content”. The font becomes white, the image is scaled down and the link content is centered inside the button:


#link-content #pic{
margin-left: 2px;
}
#pic{
height:auto;
width:2vw;
}
h3{
float:none;
display: inline;
color:white;
text-decoration: none;
text-align: center;
margin-top:5px;
}
#link-content {
padding: 5px;
background-color:#622181;
width:10vw;
height:5vh;
border-radius:10px;
text-align: center;
}

Now we get to the effect: to influence the picture over a hover on the link, you need to put the selector for the picture after the “:hover” pseudo class, which you append to the link selector. With this you address the element “pic” when hovering over the element “link”. For the movement I use an animation, in which I move the element to the right. Using alternate it will be played backwards at the end, resulting in a smooth motion.

#link:hover #pic{
animation:slide 0.8s ease-in-out infinite alternate;
-moz-animation:slide 0.8s ease-in-out infinite alternate;
-webkit-animation:slide 0.8s ease-in-out infinite alternate;
-o-animation:slide 0.8s ease-in-out infinite alternate;
}
@keyframes slide {
from{
transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
}
to {
transform: translate(10px,0px);
-moz-transform: translate(10px,0px);
-webkit-transform: translate(10px,0px);
-o-transform: translate(10px,0px);
}
}

That would be it for this time. Have fun!

facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Leave a Reply

Your email address will not be published. Required fields are marked *