鼠标移入图片各种酷炫效果"/>
【技巧】鼠标移入图片各种酷炫效果
先看效果：
HTML代码如下：
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>RunJS</title></head><body><div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser -> <!-- Image Caption 1 --> <div id="box-1" class="box"> <img id="image-1" src="bird.jpg" width="200" height="200"/> <span class="caption simple-caption"> <p>Simple Caption</p> </span> </div> <!-- Image Caption 2 --> <div id="box-2" class="box"> <img id="image-2" src="bird2.jpg" width="200" height="200"/> <span class="caption full-caption"> <h3>Full Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Image Caption 3 --> <div id="box-3" class="box"> <img id="image-3" src="fish2.jpg" width="200" height="200"/> <span class="caption fade-caption"> <h3>Fade Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Image Caption 4 --> <div id="box-4" class="box"> <img id="image-4" src="tx.png" width="200" height="200"/> <span class="caption slide-caption"> <h3>Slide Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Image Caption 5 --> <div id="box-5" class="box"> <div class="rotate"><!-- Rotating div --> <img id="image-5" src="border.png" width="200" height="200"/> <span class="caption rotate-caption"> <h3>This is rotate caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div> <!-- Image Caption 6 --> <div id="box-6" class="box"> <img id="image-6" src="aaa.svg" width="200" height="200"/> <span class="caption scale-caption "> <h3>Free Style Caption</h3> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div> <!-- end of #mainwrapper--> </body>
</html>CSS代码如下：
html { background-color: #eaeaea; } p,h3{border: 0 none;font: inherit;margin: 0;padding: 0;vertical-align: baseline;}p{ margin-bottom: 1em ; font-size: 12px; } h3 {font-size: 108%;margin: 1em 0; font-weight:blod;}#mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 80px auto 0 auto; text-align: center; width: 660px; } #mainwrapper .box { border: 5px solid #fff; cursor: pointer; height: 182px; float: left; margin: 5px; position: relative; overflow: hidden; width: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc; } #mainwrapper .box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } #mainwrapper .box .caption { background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; left: 0; } #mainwrapper .box .simple-caption { height: 30px; width: 200px; display: block; bottom: -30px; line-height: 25pt; text-align: center; } #mainwrapper .box .full-caption { width: 170px; height: 170px; top: -200px; text-align: left; padding: 15px; } #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption { opacity: 0; width: 170px; height: 170px; text-align: left; padding: 15px; } /** Caption 4: Slide **/ #mainwrapper .box .slide-caption { width: 170px; height: 170px; text-align: left; padding: 15px; left: 200px; } #mainwrapper #box-5.box .rotate-caption { width: 170px; height: 170px; text-align: left; padding: 15px; top: 200px; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #mainwrapper .box .rotate { width: 200px; height: 400px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p { position: relative; left: -200px; width: 170px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } #mainwrapper .box .scale-caption h3 { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; } #mainwrapper .box .scale-caption p { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } #mainwrapper .box:hover .simple-caption { -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); }
#mainwrapper .box:hover .full-caption { -moz-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%);
} #mainwrapper .box:hover .slide-caption { background-color: rgba(0,0,0,1) !important; -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); opacity: 1; transform: translateX(-100%); } #mainwrapper .box:hover img#image-4 { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } /** Rotate Caption :hover Behaviour **/ #mainwrapper .box:hover .rotate { background-color: rgba(0,0,0,1) !important; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
#mainwrapper .box:hover #image-6 { -moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4);
}#mainwrapper .box:hover .scale-caption h3,#mainwrapper .box:hover .scale-caption p { -moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); }
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {opacity: 1;
}更多推荐
【技巧】鼠标移入图片各种酷炫效果
发布评论