kodcudost

css resim efekti1
<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style><div class="hovergallery"> <img src="coconut.jpg" /> <img src="sunbreakthrough.jpg" /> <img src="desert.jpg" /> <img src="sunflower.jpg" /> <img src="forest.jpg" /> <img src="duck.jpg" /> </div>
kod önizleme

css resim efekti2
<style type="text/css"> .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 65px; height:60px; } .bubblewrap li img{ width: 55px; /* width of each image.*/ height: 60px; /* height of each image.*/ border:0; margin-right: 12px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); } </style> <ul class="bubblewrap"> <li><a href="#"><img src="media/stumbleupon.png" title="Add to Stumbleupon" /></a></li> <li><a href="http://dynamicdrive.com"><img src="media/facebook.png" title="Add to Facebook" /></a></li> <li><a href="http://dynamicdrive.com"><img src="media/digg.png" title="Add to Digg" /></a></li> <li><a href="http://dynamicdrive.com"><img src="media/twitter.png" title="Add to Twitter" /></a></li> <li><a href="http://dynamicdrive.com"><img src="media/rss.png" title="Add RSS Feed" /></a></li> </ul>
kod önizleme

css resim efekti3
<style type="text/css"> /* smart image enlarger starts here */ /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */ .ienlarger { float: left; clear: none; /* set to left or right if needed */ padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ } .ienlarger a { display:block; text-decoration: none; /* add cursor:default; to this rule to disable the hand cursor */ } .ienlarger a:hover{ /* don't move this positioning to normal state */ position:relative; } .ienlarger span img { border: 1px solid #FFFFFF; /* adds a border around the image */ margin-bottom: 8px; /* pushes the text down from the image */ } .ienlarger a span { /* this is for the large image and the caption */ position: absolute; display:none; color: #FFCC00; /* caption text colour */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* caption text size */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; } .ienlarger img { /* leave or IE puts a border around links */ border-width: 0; } .ienlarger a:hover span { display:block; top: 50px; /* means the pop-up's top is 50px away from thumb's top */ left: 90px; /* means the pop-up's left is 90px far from the thumb's left */ z-index: 100; /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ /* If you want the pop-up open above the thumb, remove the top: 50px; and add bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ /* add cursor:default; to this rule to disable the hand cursor only for the large image */ } .resize_thumb { width: 150px; /* enter desired thumb width here */ height : auto; } /* smart image enlarger ends here */ </style> <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br /> Some text can go here.</span></a></div> <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br /> Some text can go here.</span></a></div> <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br /> Some text can go here.</span></a></div> <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br /> Some text can go here.</span></a></div> <br style="clear:left" />
kod önizleme

css resim efekti4
<style type="text/css"> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ } </style><a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <br /> <br /> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br /> <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>
kod önizleme

css resim efekti5
<style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style><div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> <a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a> <br /> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a> <br /> <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a> </div>
kod önizleme

css resim efekti6
<style type="text/css"> .toggleopacity img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; } .toggleopacity:hover img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; } .toggleopacity img{ border: 1px solid #ccc; } .toggleborder:hover img{ border: 1px solid navy; } .toggleborder:hover{ color: red; /* Dummy definition to overcome IE bug */ } </style><a class="toggleopacity" href="http://www.dynamicdrive.com"> <img border="0" src="media/button.gif" width="137" height="26" /> </a> <a class="toggleborder" href="http://www.dynamicdrive.com/style/"> <img border="0" src="media/button2.gif" width="163" height="57" /> </a>
kod önizleme