글

라벨이 mouseover effect인 게시물 표시

Hover Effect: slide right effect in jQuery or in pure CSS3 / 제이쿼리 또는 CSS3를 이용하여 마우스오버했을때 오른쪽방향으로 배경색 채우기

<ul class="lnb"> <li class="on active"><a href="#">mouseover to slide right 01</a></li> <li><a href="#">mouseover to slide right 02</a></li> <li><a href="#">mouseover to slide right 03</a></li> <li><a href="#">mouseover to slide right 04</a></li> </ul> <style> a{color:inherit; width:100%;} ul.lnb {display:block; position:relative; border:1px solid #e6e6e6; margin:0; padding:0; width:300px; overflow:hidden;} ul.lnb > li {display:block; position:relative; color:#4d4d4d; text-indent:10px; font-size:13px; line-height:36px; border:1px solid #e6e6e6;} ul.lnb > li > a {display:block; position:relative; height:36px;} ul.lnb > li.on > a {background-color:#4d4d4d; color:#fff;} </style> <script> $( document ).ready(function() {     var lnb=$('.lnb > li...

Hover Effect in CSS(extension effect when you mouse over) / CSS로 마우스오버시 이미지 확대효과 주기

<img src="http://placehold.it/100x100"> <style> img { -webkit-transition: 1s linear; -moz-transition: 1s linear; -o-transition: 1s linear; -ms-transition: 1s linear; transition: 1s linear; } img:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } </style>