Hover Effekt Transform Eigenschaft

Ich versuche, eine Galerie zu machen, die Links von unten auf Hover zeigen. Ich habe Schwierigkeiten, sie zu verstecken, wenn sie nicht schweben.Hover Effekt Transform Eigenschaft

Ich versuche, eine Galerie zu machen, die Links zeigen von unten auf Hover. Ich habe Schwierigkeiten, sie zu verstecken, wenn sie nicht schweben. Ich versuche, eine Galerie zu machen, die Links von unten auf Hover zeigen. Ich habe Schwierigkeiten, sie zu verstecken, wenn sie nicht schweben. Ich versuche, eine Galerie zu machen, die Links von unten auf Hover zeigen. Ich habe Schwierigkeiten, sie zu verstecken, wenn sie nicht schweben. Ich versuche, eine Galerie zu machen, die Links von unten auf Hover zeigen. Ich habe Schwierigkeiten, sie zu verstecken, wenn sie nicht schweben.

.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>

Quelle

2016-12-25 user2777173

können Sie Ihren Code hinzufügen – ab29007

meinen Sie, wenn Sie auf das Bild – ab29007

Fügen Sie overflow:hidden; zu Ihrer .imageWrapper Klasse hinzu. Hier arbeitet Code:

.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>

Quelle

2016-12-25 07:30:08 ab29007

Thnx viel ... !!! – user2777173

können Sie meine Antwort dann akzeptieren. Sie wissen, klicken Sie auf das Häkchen auf der linken Seite meiner Antwort – ab29007

~~Ändern Sie diese Zeile transform: translateX(0) translateY(100px) translateZ(0); zu transform: translateX(0) translateY(115px) translateZ(0);~~ :

overflow:hidden zu .imageWrapper Fügen Sie den Raum unter Bilder

.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>

zu entfernen

Quelle

2016-12-25 07:28:05

thnx viel schweben ... !! – user2777173

danke für diese chris und es ist * sie * :) – ab29007

Mit dem Zweck erreicht, löschte ich meinen Kommentar ... Sorry, dass nicht gut mit Namen. :) –

Hover Effekt Transform Eigenschaft

Antwort

Verwandte Themen