그림 위로 마우스를 가져 가면 효과가 발생합니다.

Question

다음과 같은 호버 효과를 만들려면 어떻게해야합니까?

나는 그것을 이런 식으로하려고 노력 :

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>

가 어떻게 이미지 아래의 텍스트를 중심으로 수를, 어떻게 내가 바닥 삼각형이 일치해야합니까 예?

Answer 1

이 시도 :

a.apparat { 
 
color: #4a4a4a; 
 

 
float:left; 
 
margin:5px; 
 
} 
 
a.apparat:hover{ 
 
\t color: #1c97a9; 
 
\t 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 { 
 
\t border: 2px solid #4a4a4a; 
 
\t width: 250px; 
 
\t height: 250px 
 
} 
 
a:hover img.catalog_apparat{ 
 
\t border: 2px solid #1c97a9; 
 
} 
 
.apparat_description { 
 
\t font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
 
\t font-weight: bolder; 
 
\t font-size: 14px; 
 
\t margin:6px 0 10px; 
 
    text-align: center; 
 
} 
 
.apparat_description:hover .catalog_apparat { 
 
\t 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>

다음

Answer 2

센터에 텍스트를 만들기위한 업데이트로 코드입니다.

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

Answer 3

a.apparat { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    vertical-align: top; 
 
    text-align: center; 
 
    color: #4a4a4a; 
 
} 
 
a.apparat:hover { 
 
    color: #1c97a9; 
 
    text-decoration: none; 
 
} 
 
.apparat_image { 
 
    border: 2px solid #4a4a4a; 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 
.apparat_image:before, 
 
.apparat_image:after { 
 
    border-color: #4a4a4a transparent transparent; 
 
    border-width: 10px 9px 0; 
 
    border-style: solid; 
 
    position: absolute; 
 
    margin-left: -9px; 
 
    bottom: -10px; 
 
    content: ''; 
 
    left: 50%; 
 
    height: 0; 
 
    width: 0; 
 
} 
 
.apparat_image:after { 
 
    border-color: #fff transparent transparent; 
 
    border-width: 9px 7px 0; 
 
    margin-left: -7px; 
 
    bottom: -8px; 
 
    
 
} 
 
a.apparat:hover .apparat_image:before { 
 
    border-color: #1c97a9 transparent transparent; 
 
} 
 
a.apparat:hover .apparat_image { 
 
    border-color: #1c97a9; 
 
} 
 
img.catalog_apparat { 
 
    display: block; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
.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="apparat_image"> 
 
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1"> 
 
    </div> 
 
    <div class="apparat_description">Gynecology</div> 
 
</a> 
 
<a href="#" class="apparat"> 
 
    <div class="apparat_image"> 
 
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1"> 
 
    </div> 
 
    <div class="apparat_description">Gynecology</div> 
 
</a> 
 
<a href="#" class="apparat"> 
 
    <div class="apparat_image"> 
 
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1"> 
 
    </div> 
 
    <div class="apparat_description">Gynecology</div> 
 
</a> 
 
<a href="#" class="apparat"> 
 
    <div class="apparat_image"> 
 
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1"> 
 
    </div> 
 
    <div class="apparat_description">Gynecology</div> 
 
</a>