Script marire imagine overmouse css - Forum

[ Mesaje noi · Membrii · Regulamentul forumului · Căutare · RSS ]
Pagina 1 din 11
Forum » Tutoriale si Resurse (T&R) » T&R CSS3 » Script marire imagine overmouse css
Script marire imagine overmouse css
GravediggerData: Miercuri, 2013-06-12, 0:28 AM | Mesaj # 1
Gravedigger
Administrator
Grup: Administratori
Mesaje: 542
Premii: 10
Reputatie: 5
Stare: Offline
Astazi vreau sa va prezint un cod css care face ca atunci cand pui mouse-ul pe o anumita imagine aceasta sa se mareasca incet.Ve-ti avea mai jos codul.Pentru a testa acest script creati un fisier .txt si ii schimbati extensia in .htm sau .html dupa care il editati cu un editor text si copiati codul in el dupa care il deschideti cu un browser(pentru incepatori).Sper sa va fie de folos.

Cod
<style>
div.demoAB4 {
cursor: pointer;
position: relative;
text-align: center;
}
div.demoAB4:before {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 0 10px #A0A9B1 inset;
content: "111";
font-family: Tahoma;
font-size: 32px;
height: 48px;
line-height: 48px;
opacity: 0;
padding: 0 10px;
position: absolute;
right: 50px;
top: 20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
div.demoAB4:hover:before {
right: 0px;
opacity: 1;
top: 0px;
}
div.demoAB4 img {
width: 100px;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
div.demoAB4 img:hover {
width: 500px;
}
div.demoAB4:after {
content: "1";
display: block;
font-weight: bold;
font-family: Helvetica;
font-size: 20px;
text-align: center;
}
</style>

<div class="demoAB4">
<img src="http://img842.imageshack.us/img842/448/phpmelody.png" /></div>





 
Forum » Tutoriale si Resurse (T&R) » T&R CSS3 » Script marire imagine overmouse css
Pagina 1 din 11
Căutare: