Hover Effect Transform property

Я пытаюсь создать галерею, ссылки отображаются снизу на hover. У меня возникают проблемы с тем, чтобы скрыть их, когда они не на ходу.Hover Effect Transform property

Я пытаюсь создать галерею, ссылки отображаются снизу на hover. У меня возникают проблемы с тем, чтобы скрыть их, когда они не на ходу. Я пытаюсь создать галерею, ссылки отображаются снизу на hover. У меня возникают проблемы с тем, чтобы скрыть их, когда они не на ходу. Я пытаюсь создать галерею, ссылки отображаются снизу на hover. У меня возникают проблемы с тем, чтобы скрыть их, когда они не на ходу. Я пытаюсь создать галерею, ссылки отображаются снизу на hover. У меня возникают проблемы с тем, чтобы скрыть их, когда они не на ходу.

.imageWrapper { 
 
     position: relative; 
 
     width: 200px; 
 
     height: 200px; 
 
     display: inline-block; 
 
     padding: 0px; 
 
     margin: 0px; 
 
    } 
 
    .imageWrapper img { 
 
     display: block; 
 
     width: 200px; 
 
     height: 200px; 
 
     padding: 0px; 
 
     margin: 0px; 
 
    } 
 
    .imageWrapper .cornerLink { 
 
     height:100px; 
 
     width:200px; 
 
     opacity: 0.7; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     margin: 0; 
 
     padding: 0; 
 
     color: #ffffff; 
 
     background-color: cadetblue; 
 
     text-decoration: none; 
 
     text-align: center; 
 
     transform: translateX(0) translateY(100px) translateZ(0); 
 
     transition-duration:0.3s; 
 
     transition-property: transform; 
 
     
 
    } 
 
    .imageWrapper:hover .cornerLink { 
 
     transform: translateX(0) translateY(0) translateZ(0); 
 
    } 
 
    a{ 
 
     color: #ffffff; 
 
     text-decoration: none; 
 
     text-align: center; 
 
    }

<body> 
 
     <main> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
      
 
      
 
     </main> 
 
    </body>

источник

2016-12-25 user2777173

вы можете добавить свой код – ab29007

вы имеете в виду при наведении на изображение – ab29007

Добавить overflow:hidden; в ваш .imageWrapper класс. Вот рабочий код:

.imageWrapper { 
 
     position: relative; 
 
     width: 200px; 
 
     height: 200px; 
 
     display: inline-block; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     overflow:hidden; 
 
    } 
 
    .imageWrapper img { 
 
     display: block; 
 
     width: 200px; 
 
     height: 200px; 
 
     padding: 0px; 
 
     margin: 0px; 
 
    } 
 
    .imageWrapper .cornerLink { 
 
     height:100px; 
 
     width:200px; 
 
     opacity: 0.7; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     margin: 0; 
 
     padding: 0; 
 
     color: #ffffff; 
 
     background-color: cadetblue; 
 
     text-decoration: none; 
 
     text-align: center; 
 
     transform: translateX(0) translateY(100px) translateZ(0); 
 
     transition-duration:0.3s; 
 
     transition-property: transform; 
 
     
 
    } 
 
    .imageWrapper:hover .cornerLink { 
 
     transform: translateX(0) translateY(0) translateZ(0); 
 
    } 
 
    a{ 
 
     color: #ffffff; 
 
     text-decoration: none; 
 
     text-align: center; 
 
    }

<body> 
 
     <main> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
      
 
      
 
     </main> 
 
    </body>

источник

2016-12-25 07:30:08 ab29007

Thnx alot ... !!! – user2777173

вы можете принять мой ответ. вы знаете, нажмите на галочку слева от моего ответа – ab29007

~~Изменить эту строку transform: translateX(0) translateY(100px) translateZ(0); в transform: translateX(0) translateY(115px) translateZ(0);~~ :

Добавить overflow:hidden в .imageWrapper удалить пространство под изображениями

.imageWrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; /* Hides links when off image */ 
 
} 
 
.imageWrapper img { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.imageWrapper .cornerLink { 
 
    height: 100px; 
 
    width: 200px; 
 
    opacity: 0.7; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #ffffff; 
 
    background-color: cadetblue; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    transform: translateX(0) translateY(100px) translateZ(0); 
 
    transition-duration: 0.3s; 
 
    transition-property: transform; 
 
} 
 
.imageWrapper:hover .cornerLink { 
 
    transform: translateX(0) translateY(0) translateZ(0); 
 
} 
 
a { 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<body> 
 
    <main> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 

 

 
    </main> 
 
</body>

источник

2016-12-25 07:28:05

Thnx много ... !! – user2777173

благодарю вас за этот крис, и он * она * :) – ab29007

С достижением цели я удалил свой комментарий ... Извините, но это не здорово с именами. :) –

ответ

Смежные вопросы