3D görünümlü gerçekçi hover-efekti

Css3  dönüşümler ve  geçişler  kullanarak hazırladığım biraz gerçekçi görünümdeki  hover efektini yapmamdaki asıl amacım aslında küp  şeklinde  dönen yan menüydü. Nedense  bu tarz  bi örnek ile daha önce hiç karşılaşmadığım için bu seferlik böyle bir çalışma ortaya çıktı.  Asıl yapmak istediğim görünümü elde  etmiş olmasam bile hoş bir çalışma olarak görünüyor. Ayrıca alt kısım için uygun bi renk seçeneği bir türlü tutturamadım. Yazı karakterleri  ve  arka planını  kendi zevkinize  göre ayarlarsanız  sanırım daha iyi olur.

3D görünümlü gerçekçi Css3 hover  efekti örneğinde  mouse ile resmin olduğu çerçeveye geldiğinizde resim 70px  yukarı çıkarken Css3 perspective  sayesinde resmin üst kısmı  yan yatıyor ve 3 boyutluymuş gibi  görünüyor. Bu işlem sırasında üstten ışık  vuruyormuş  gibi  bir  efekteklemek istedim örneğe. Saydamlık ayarı verdiğimde beyaz arkaplanla  gayet güzel görünüyordu ama arkaplan renkli olunca resmin arkasında arkaplanın rengi çıkmaya başladı  bu yüzden resmi ayrı bir çerçeveye  alıp arkaplan renginide  beyaz yaptım. Mouse ile resmin üzerine geldiğinizde sanki üstten ışık vuruyormuş gibi  bir  görünüm ortaya çıkıyor.

Asında  asıl  elde etmek istediğim görüntü mouse resmin üzerinde  geldiğinde yukarı çıkan resmin tavanda yer kalmadığı için eğilmesiydi. Az çok  aklımdan tasarladığım görüntüyü elde ettiğimi sanıyorum. Tabi işin en önemli  tarafı  örneği sizin beğenmeniz. Bu konuda  yorumlarınızı eksik etmeyin. Alt kısım yani resim açıklamalarının olduğu bölüm gayet kötü onu kabul ediyorum. bunun dışında kullanılmaya değer  bir örnek diye düşünüyorum.

Son olarak söylemem gereken diğer önemli bir konu 3D  görünümlü animasyonlu  şekilde  görünen Css3 hover örneğinde  herhangi  bir  JavaScript  yada jQuery kullanmadım. Tamamiyle Css kodlarda oluşuyor. Yanlız eklediğim bir tane ikon var. Onu da WeLoveIconFonts  sitesinden ekledim. Dilerseniz daha farklı ikon seçeneklerini  bulabilirsiniz. Yada Css3 gerçekçi hover örneğinden silebilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css :

Font awesome ikon kodu : 

@charset "utf-8";
@import url(https://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
 font-family: 'FontAwesome', sans-serif;
}

 Demo css kodu : 

ul.cerceve {
   width:780px;
   height:auto;
   margin: 0 auto;
}
li.contentBox {
   width:250px;
   height:307px;
   overflow:hidden;
   display:block;
   float:left;
   margin:0.5%;
}
li.contentBox .imgBox {
   width:242px;
   height:300px;
   float:left;
   list-style:none;
   display:block;
   background-color:#999999;
   border:4px solid #026873;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transform: perspective(500px) rotateY(0deg);
   -moz-transform: perspective(500px) rotateY(0deg);
   -ms-transform: perspective(500px) rotateY(0deg);
   -o-transform: perspective(500px) rotateY(0deg);
   transform: perspective(500px) rotateY(0deg);
   -webkit-transition:0.7s;
   -moz-transition:0.7s;
   -ms-transition:0.7s;
   -o-transition:0.7s;
   transition:0.7s; 
}
li.contentBox:hover .imgBox {
   margin-top:-70px;
   background-color:#FFFFFF;
   -webkit-transform: perspective(400px) rotateX(20deg);
   -moz-transform: perspective(400px) rotateX(20deg);
   -ms-transform: perspective(400px) rotateX(20deg);
   -o-transform: perspective(400px) rotateX(20deg);
   -transform: perspective(400px) rotateX(20deg);
   -webkit-transition:0.7s;
   -moz-transition:0.7s;
   -ms-transition:0.7s;
   -o-transition:0.7s;
   transition:0.7s; 
}
li.contentBox .imgBox img {
    width:100%;
	height:100%;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transform: perspective(500px) rotateY(0deg);
   -moz-transform: perspective(500px) rotateY(0deg);
   -ms-transform: perspective(500px) rotateY(0deg);
   -o-transform: perspective(500px) rotateY(0deg);
   transform: perspective(500px) rotateY(0deg);
   -webkit-transition:0.7s;
   -moz-transition:0.7s;
   -ms-transition:0.7s;
   -o-transition:0.7s;
   transition:0.7s; 
}
li.contentBox:hover  .imgBox img {
   opacity: 0.5;  
   -webkit-transition:0.7s;
   -moz-transition:0.7s;
   -ms-transition:0.7s;
   -o-transition:0.7s;
   transition:0.7s;    
}
li.contentBox > .textBox {
   width:250px;
   height:100px;
   display:block;
   float:inherit;
   background-color:#003333;
}
li.contentBox .textBox h3 {
   text-decoration:none;
   font-weight:900;
   font-family: Garamond, serif;
   color:#FFFFFF;
   margin-top:20px;
   margin-left:10px;
   float:left;
}
li.contentBox .textBox  {
   text-decoration:none;
   background-color:#003333;
   width:250px;
   height:70px;
   float:right;
}
li.contentBox .linkBox  {
   margin-top:8px;
   margin-right:10px;
   color:#999999;
   font-size:30px;
   width:23px;
   height:auto;
   float:right;
   padding: 10px 10px 10px 15px;
}
li.contentBox .linkBox:hover  {
   margin-top:8px;
   margin-right:10px;
   color:#FFFFFF;
   font-size:30px;
   width:23px;
   height:auto;
   float:right;
   padding: 10px 10px 10px 15px;
}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<ul class="cerceve">
  <li class="contentBox">
    <div class="imgBox">
       <img src="https://lorempixel.com/250/300/cats/" alt="people" />
	</div>
    <div class="textBox"><h3>Beatiful Cats</h3>
       <a href="https://www.mintik.com/?p=14754"><span class="linkBox fontawesome-resize-full"></span></a>
    </div>  
  </li>
  <li class="contentBox">
    <div class="imgBox">
       <img src="https://lorempixel.com/250/300/business/" alt="people" />
	</div>
    <div class="textBox"><h3>Business World</h3>
       <a href="https://www.mintik.com/?p=14754"><span class="linkBox fontawesome-resize-full"></span></a>
    </div>  
  </li>
  <li class="contentBox">
    <div class="imgBox">
       <img src="https://lorempixel.com/250/300/city/" alt="people" />
	</div>
    <div class="textBox"><h3>Wonderful Cities</h3>
       <a href="https://www.mintik.com/?p=14754"><span class="linkBox fontawesome-resize-full"></span></a>
    </div>  
  </li>
  <li class="contentBox">
    <div class="imgBox">
       <img src="https://lorempixel.com/250/300/nightlife/" alt="people" />
	</div>
    <div class="textBox"><h3>Night Life</h3>
       <a href="https://www.mintik.com/?p=14754"><span class="linkBox fontawesome-resize-full"></span></a>
    </div>  
  </li>
  <li class="contentBox">
    <div class="imgBox">
       <img src="https://lorempixel.com/250/300/nature/" alt="people" />
	</div>
    <div class="textBox"><h3>Nature & Life</h3>
       <a href="https://www.mintik.com/?p=14754"><span class="linkBox fontawesome-resize-full"></span></a>
    </div>  
  </li>
  <li class="contentBox">
    <div class="imgBox">
       <img src="https://lorempixel.com/250/300/sports" alt="people" />
	</div>
    <div class="textBox"><h3>Sports & Healty</h3>
       <a href="https://www.mintik.com/?p=14754"><span class="linkBox fontawesome-resize-full"></span></a>
    </div>  
  </li>
</ul>