Mouse Üzerine Gelince Büyüyen Yuvarlak Köşeli Div Menü

   Css3 hover efekti ile alakalı bir diğer konu mouse ile resimlerin üzerine geldiğinizde resimde  biraz kararma oluşuyor. Bu kararmaya neden olan svg formatın da css kodlara  eklenmiş saydam bir dosya. Resmin üzerine geldiğinizde hover efekti sayesinde görünüyor ve mouseyi çektiğinizde tekrar kayboluyor.

CSS KODLARI:

Css kodlarını head etiketleri arasında ki gerekli bölüme ekleyin.

body {<br /> background-color:#333333<br /> }<br /> #cerceve{<br /> width:800px;<br /> height:80%;<br /> margin: 0 auto;<br /> }<br /> .resim_cerceve{<br /> cursor:pointer;<br /> float:left;<br /> margin-top:20px;<br /> margin-left:20px;<br /> border-radius:50%;<br /> border:5px solid #ffffff;<br /> box-shadow:2px 1px 15px -9px #000000;<br /> width:160px;<br /> height:160px;<br /> overflow:hidden;<br /> }<br /> .resim{<br /> position:absolute;<br /> border-radius:50%;<br /> width:160px;<br /> height:160px;<br /> overflow:hidden;<br /> padding:0;<br /> margin:0;<br /> border:0px solid #eeeeee;<br /> -webkit-transition:all 0.5s ease;<br /> -ms-transition: all 0.5s ease;<br /> -moz-transition:all 0.5s ease;<br /> -o-transition:all 0.5s ease;<br /> transition:all 0.5s ease;<br /> }<br /> .resim img{<br /> border-radius:50%;<br /> margin-left:-20px;<br /> margin-top:-20px;<br /> }<br /> .resim_cerceve:hover .resim{<br /> width:160px;<br /> height:160px;<br /> border:5px solid #f98523;<br /> padding:15px;<br /> margin-left:-20px;<br /> margin-top:-20px;<br /> }<br /> .golge{<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> border-radius:50%;<br /> overflow:hidden;<br /> -webkit-transition: background-color 0.3s ease-in-out;<br /> -moz-transition: background-color 0.3s ease-in-out;<br /> -ms-transition: background-color 0.3s ease-in-out;<br /> -o-transition: background-color 0.3s ease-in-out;<br /> transition: background-color 0.3s ease-in-out;<br /> }<br /> .resim:hover .golge{<br /> background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);<br /> background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */<br /> background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */<br /> background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */<br /> background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */<br /> background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */<br /> background-color: rgba(0,0,0,0.4);<br /> }<br /> .aciklama{<br /> position: absolute;<br /> width:100%;<br /> bottom:30px;<br /> -moz-opacity: 0;<br /> -khtml-opacity: 0;<br /> opacity: 0;<br /> -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);<br /> filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);<br /> filter:alpha(opacity=0); <br /> -webkit-transform: translate(0,100%);<br /> -moz-transform: translate(0,100%);<br /> -ms-transform: translate(0,100%);<br /> -o-transform: translate(0,100%);<br /> transform: translate(0,100%);<br /> -webkit-transition: all 0.6s ease-in-out;<br /> -moz-transition: all 0.6s ease-in-out;<br /> -ms-transition: all 0.6s ease-in-out;<br /> -o-transition: all 0.6s ease-in-out;<br /> transition: all 0.6s ease-in-out;<br /> }<br /> .aciklama h2{font-size:1.2em; font-weight:800; color:#f98523;text-transform:uppercase; text-align:center;<br /> }<br /> .resim:hover .aciklama{<br /> margin-bottom:40px;<br /> -moz-opacity: 1;<br /> -khtml-opacity: 1;<br /> opacity: 1;<br /> -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);<br /> filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);<br /> filter:alpha(opacity=100);<br /> -webkit-transform: translate(0,0);<br /> -moz-transform: translate(0,0);<br /> -ms-transform: translate(0,0);<br /> -o-transform: translate(0,0);<br /> transform: translate(0,0); <br /> }

HTML KODLARI:

Html kodlarını body etiketleri arasına ekleyin

<div id="cerceve"> <div class="resim_cerceve"> <div class="resim"> <img src="http://lorempixel.com/200/200/sports/1/" /><br /> <div class="golge"> <div class="aciklama"> <h2> Baseball</h2> </div> <!-- aciklama --><br /> </div> <!-- golge --> <br /> </div> <!-- resim --><br /> </div> <!-- resim_cerceve -->

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...