figcaption überquellende Bildbreite

Question

Ich habe ein col-md-4 und innen Ich habe ein figure und figcaption, auf denen die hover Aktion sollte die figcaption mit zwei Knöpfen gezeigt wird, wird der Effekt funktioniert, aber die figcaption in die Bildbreite überfüllt. Irgendein Vorschlag?

Beachten Sie, dass, wenn ich mit der Maus über den leeren Raum passieren, hält der Effekt funktioniert, wenn es nur funktionieren, wenn ich de Maus über das Bild übergeben:

Druck:

HTML:

<div class="row text-center"> 
     <div class="col-md-4 col-sm-4"> 
      <figure> 
      <img src="img/hidrau.png" alt="Hidraurio Mangueiras"> 
      </figure> 
     </div> 
     <div class="col-md-4 col-sm-4"> 
      <figure> 
      <img src="img/Gescolar.png" alt="Hidraurio Mangueiras"> 
      <figcaption> 
      <a href="http://hidrauriomangueiras.com.br" target="_blank"><button class="btn-legenda">Visitar</button></a> 
      <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button class="btn-legenda">Github</button></a> 
      </figcaption> 
      </figure> 
     </div> 
     <div class="col-md-4 col-sm-4"> 
      <figure> 
      <img src="img/hidrau.png" alt="Hidraurio Mangueiras"> 
      </figure> 
     </div> 
    </div> 

CSS:

#portfolio figure{ 
    position: relative; 
    overflow: hidden; 
} 
#portfolio img{ 
    transition: all 0.4s ease; 
} 

#portfolio figure figcaption{ 
    overflow: hidden; 
    position: absolute; 
    bottom: -80px; 
    height: 80px; 
    width: 100%; 
    transition: all 0.4s ease; 
    color: white; 
    background-color: #eeeeee; 
} 
#portfolio figure:hover figcaption { 
    transform: translateY(-80px); 
} 
#portfolio figure:hover img { 
    opacity: 1; 
    transform: translateY(-50px); 
} 

Answer 1

Die :hover Pseudo ist aktiviert, wenn Sie den Mauszeiger über das Element figure bewegen, das derzeit eine block Anzeige verwendet, was bedeutet, dass es 100% der Breite seiner Eltern einnimmt. Hier zwei Lösungswege:

Anzeige: Inline-Block;

Damit wird die Breite an den Inhalt angepasst, in diesem Fall das img Element.

#portfolio figure{ 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 

codepen

Hinweis: das wird die ganze Figur zu dieser Breite schrumpfen, so dass der figcaption Hintergrund wird die gesamte Breite nicht überspannen, wenn Sie das brauchen ...

Spanne in der Figur

Um die Figur auf 100% Breite zu halten, anstatt den Effekt auf diezu aktivieren 10 element, einfach seinen Inhalt in ein anderes Element wie einen Bereich einbinden und die Hover-Stile darauf anwenden.

HTML

<figure> 
    <span> 
    <img src="img/Gescolar.png" alt="Hidraurio Mangueiras"> 
    <figcaption> 
     <a href="http://hidrauriomangueiras.com.br" target="_blank"><button class="btn-legenda">Visitar</button></a> 
     <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button class="btn-legenda">Github</button></a> 
    </figcaption> 
    </span> 
</figure> 

CSS

#portfolio figure>span:hover figcaption { 
    transform: translateY(-80px); 
} 
#portfolio figure>span:hover img { 
    opacity: 1; 
    transform: translateY(-50px); 
} 

codepen