css resim hover efekti

css resim hover efekti – Bir e-ticaret siteniz olduğunu varsayalım veya gerçekten de vardır. Kullanışlı ve güzel görünen bir websitesi her zaman müşterilerin dikkatini çekecektir.
Bu yazıda size sitelerinizde kullanabileceğiniz harika bir resim hover efekti vereceğim. Yani hover ile şunu demek istiyorum: fare resmin üzerine gelince resim biraz büyüyecek ve kategori başlığı gözükecek.

DEMOİNDİR

Hadi başlayalım…

Önce bir tane div etiketi oluştururalım ve içine ul ardına li listeleme etiketlerini ekleyelim. Daha sonra kategori başlığımız için bir tane de h2 etiketi ekleyelim. Resimlere link vereceğimiz için bir tane de href etiketi ekleyelim.
Bütün kod şu şekilde olacak

<div class="product-categories">
        <h1>Product Categories</h1>
    <div class="woocommerce columns-4">
        <ul class="products columns-4">
<li class="products">
    <a href="#"><img src="resim1.jpg" alt="Aksesuarlar" width="300" height="300" />
        <h2 class="aksesuar">Aksesuarlar</h2>
    </a>
</li>
<li class="products">
    <a href="#"><img src="resim2.jpg" alt="Ceketler" width="300" height="300" />
    <h2 class="ceket">Ceketler</h2>
    </a>
</li>
<li class="products">
    <a href="#"><img src="resim3.jpg" alt="Müzik" width="300" height="300" />
    <h2 class="muzik">Müzik</h2>
    </a>
</li>
<li class="products">
    <a href="#"><img src="resim4.jpg" alt="Pantolonlar" width="300" height="300" />
    <h2 class="pantolon">Pantolonlar </h2>
    </a>
</li>
         </ul>
     </div>
</div>

Neyi nasıl yaptık bir bakalım

resimlerin bulunduğu kapsayan li etiketine position: relative; değeri verdim, böylece li içindeki h2 etiketini position: absolute; ile gizleyelim.
h2 etiklene z-index: 9 değerini verdim ve onun en önde görünmesiniz sağladım. Aynı zamanda text-indent: -9999px değerini verdim ve bununla ilk aşamada h2 etiketinin sayfadan gizlenmesini sağladım. Şunu demek istiyorum h2 etiketine soldan sonsuz girinti vererek onu sağ taraftan sayfa dışına attım. Ama h2 etiketi hover olduğunda yani fare onun üzerine geldiğinde text-indent değerini 1px yaparak girintiyi iyicde azalttım, böhlece onun görünmesini sağladım. Bütün CSS kodu şu şekilde olmalıdır.

/* Advanced CSS image hover styles */
/* copyright c 2020 esakademi.com */
.product-categories ul > li{
	position: relative;
	float: left;
	list-style: none;
	font-size: 10px;
	padding: 0; margin: 0;
}
.product-categories .woocommerce h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 2em;
  z-index: 9;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  text-indent: -9999px;
  border-radius: 2px;
  box-sizing: content-box;
  opacity: 0;
  padding: 0;
  margin: 0;
}
.product-categories .woocommerce li:hover h2 {
  font-size: 2em;
  z-index: 1;
  width: 100%;
  height: 50px;
  background: red;
  text-indent: 1px;
  border-radius: 2px;
  box-sizing: content-box;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  opacity: 1;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.7);
  background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
  display: block;
  text-shadow: 1px 1px 1px #fff;
}
.product-categories .woocommerce ul li img {
	    margin:auto;
		display:block;		
		
		-webkit-transform: scale(.9);
		   -moz-transform: scale(.9);
		    -ms-transform: scale(.9);
		     -o-transform: scale(.9));		
		        transform: scale(.9);
	
		-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		   -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		    -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		     -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		        transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.product-categories .woocommerce ul > li:hover img {
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1));
		-ms-transform: scale(1);
		transform: scale(1);
	}
.product-categories .woocommerce li.products {
	border: 1px solid #000; 
	display: inline-block; 
	margin: 10px; 
	padding: 0;
	}
.product-categories .woocommerce li.products h2{
color: black;
}

			

Önceki

PHP’de tek tırnak içinde HTML kodu eklemek

Sonraki

css ile ince kenar çizgisi

Email aboneliği

Esakademi.com'dan iyi ve güzel haberler almak için listeye mailinizi ekleyin