TriSTaR TriSTaR - 5 months ago 12
HTML Question

Effect when the mouse over the picture

How to create a hover effect ? image

I tried to do it that way



a.apparat {
color: #4a4a4a;
}
a.apparat:hover{
color: #1c97a9;
text-decoration: none;
}
img.catalog_apparat {
border: 2px solid #4a4a4a;
width: 250px;
height: 250px
}
img.catalog_apparat:hover {
border: 2px solid #1c97a9;
}
.apparat_description {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bolder;
font-size: 14px;
margin:6px 0 10px;
text-align: center;
}
.apparat_description:hover .catalog_apparat {
border: 2px solid red;
}

<a href="#" class="apparat">
<img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
<div class="apparat_description">Gynecology</div>
</a>





How to make that the text was in the middle of the image and how to make the bottom triangle as in the example ?

Answer

Try this:

a.apparat {
color: #4a4a4a;

float:left;
margin:5px;
}
a.apparat:hover{
	color: #1c97a9;
	text-decoration: none;
}
.img-box{
  position:relative;
}
.img-box:before{
  content:"";
  position:absolute;
  bottom:-4px;
  left:50%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid #4a4a4a;
  margin-left: -5px;

}
.img-box:after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:50%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid #fff;
  margin-left: -5px;

}
a:hover .img-box:before{
border-top: 10px solid #1c97a9;
}
img.catalog_apparat {
	border: 2px solid #4a4a4a;
	width: 250px;
	height: 250px
}
a:hover img.catalog_apparat{
	border: 2px solid #1c97a9;
}
.apparat_description {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: bolder;
	font-size: 14px;
	margin:6px 0 10px;
  text-align: center;
}
.apparat_description:hover .catalog_apparat {
	border: 2px solid red;
}
<a href="#" class="apparat">
<div class="img-box">
<img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
</div>
<div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
<div class="img-box">
<img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
</div>
<div class="apparat_description">Gynecology</div>
</a>

Comments