Obecnie, gdy najeżdżasz na obrazek, nieprzezroczystość jest lżejsza:

https://jsfiddle.net/vo1npqdx/1268/

Jest to poprawne, ale teraz chcę też, aby jakiś tekst łączył się na szczycie obrazu. Próbowałem podążać za rozwiązaniem w tym przykładzie:

Jak pokazać tekst na obrazie podczas unoszenia?

Ale kiedy wypróbowałem tę technikę, puste miejsce pojawia się pod obrazem, tekst nie pojawia się na górze i nie jest wyśrodkowany na obrazie:

https://jsfiddle.net/vo1npqdx/1269/

Nie mogę dowiedzieć się, jak sprawić, jak sprawić, jak tekst pojawił się na szczycie cienia pudełka i wyśrodkował za pomocą CSS - wszelkie sugestie? Jeśli nie, jak to zrobisz z JavaScript? Dziękuję Ci.

HTML:

<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg"/>        
    <p class="initial-hidden">The Hamburger Collection</p>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg"/>   
</div>
<div class="my-work-image"> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg"/>
</div>
</div><!--end row-->

CSS:

.thumbnail-row {
display: flex;
}
.thumbnail-row div {
position: relative;
}
.thumbnail-row div::after {
content: '';
position: absolute;
top: 0; left: 0; 
width: 100%;
height: 100%;  
box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
display: inline-block;
max-width: 100%;
}

.my-work-image:hover {
opacity: 0.5;
}  

/*hidden text*/

.initial-hidden {
visibility: hidden;
text-align: center;
display: inline;
}

.my-work-image:hover .initial-hidden {
visibility: visible;
opacity: 1;
}

@media (max-width: 425px) {
.thumbnail-row {
flex-direction: column;
    }
}
0
HappyHands31 24 czerwiec 2017, 23:03

3 odpowiedzi

Najlepsza odpowiedź

Zmienia niektóre właściwości display.

Również zmień left: 50%; w klasie .img__description_layer, jeśli chcesz, aby tekst wystawiał tylko w pół części obrazu.

Jeśli chcesz text, aby być w środku obrazu , wystarczy usunąć klasę CSS .thumbnail-row div::after

.thumbnail-row {
  display: flex;
}

.thumbnail-row div::after {  /*remove this class to display the text in center of the image*/
  content: '';
  position: relative;
  top: 0; left: 0; 
  width: 100%;
  height: 100%;  
  box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
  display: inline-block;
  width: 100%;
  }
  
.my-work-image{
  position:relative;
}  

.img__description_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;    /*change it to 50%, if you want the text only shows in the half part */
  right: 0;
  background: rgba(36, 62, 206, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;

  text-align:center;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.my-work-image:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}

.my-work-image:hover .img__description {
  transform: translateY(0);
}
  
@media (max-width: 425px) {
  .thumbnail-row {
    flex-direction: column;
  }
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row thumbnail-row">
    <div class="my-work-image" id="margin-left-image">
      <img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" />
        <div class="img__description_layer">
          <span class="img__description">This image 1 looks super neat.</span>
        </div>
    </div>
    
    <div class="my-work-image">
      <img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" />
       <div class="img__description_layer">
          <span class="img__description">This image 2 looks super neat.</span>
        </div>
    </div>
    <div class="my-work-image">
      <img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" />
       <div class="img__description_layer">
          <span class="img__description">This image 3 looks super neat.</span>
        </div>
    </div>
   
  </div>
  <!--end row-->
</div>
2
Pawan Kumar 25 czerwiec 2017, 16:07

Przejście, tło, kolor tekstowy, itp. Oczywiście można zmienić.

Polecam dodanie filter: blur(2px) do obrazu Hover ({x1}}), aby wyglądało ładnie. Po prostu upewnij się, że dopasujesz go do przejścia.

Użyłem Flex , aby wyśrodkował tekst oraz ujemne pozycjonowanie na elemencie <p>, aby pozbyć się tej dziwnej białej przestrzeni na dole.

Edytuj: Naprawiłem również dziwną przestrzeń na dole bez hacków. Po prostu dodaj vertical-align: bottom; do obrazu.

Typ wyświetlacza rodzica ({x0}}) można również zmienić bez powodowania problemów.

Oto jsfiddle, który ma kilka innych przykładów: https://jsfiddle.net/spikespaz/p4ogwee2 /

.hoverable {
  position: relative;
  width: 400px;
  overflow: hidden;
}

.hoverable img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

.hoverable p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5)
}

.hoverable:hover p {
  opacity: 1;
}
<div class="hoverable">
  <img src="https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg" alt="Road Image">
  <p>This text will be shown on hover.</p>
</div>
0
spikespaz 24 czerwiec 2017, 21:31

Oto, sugeruję:

/* fade out only the image, not the entire thing */
.my-work-image:hover img {
    opacity: 0.5;
}  

.initial-hidden {
    visibility: hidden;
    text-align: center;
    display: inline;
    line-height:1em;

    /* use css transform to center vertically and horizontally */
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    position:absolute; top:50%; left:50%;
    color:#FFFFFF;
    z-index:2;
}

https://jsfiddle.net/vo1npqdx/1272/

0
Joel Glovacki 24 czerwiec 2017, 20:32