Hover текст поверх отзывчивых изображений

Question

Я ищу, чтобы получить тот же эффект от изображений на парении на этом сайте: http://www.cssdesignawards.com/website-of-the-day-award-winners.php

Изображения отзывчивы и при наведении, они показывают текст и фиолетовый фон замирание в.

Кто-нибудь знает код для воспроизведения этого эффекта?

Answer 1

Here

Включите<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>в своем заголовке перед выполнением других ваших скриптов JQuery

Ссылки из выше тега сценария из https://developers.google.com/speed/libraries/devguide для самого последнего выпуска Hosted JQuery библиотеки Google.

---

В следующий раз вы задаете вопрос, включает в себя код у вас есть, код, который вы пробовали и jsfiddle (http://www.jsfiddle.net). Ваш вопрос, скорее всего, будет принят сообществом stackoverflow. Посмотрите на this для получения дополнительной информации о том, как правильно задать вопрос о stackoverflow. Не просите людей «сделать» код для вас, если вы еще не продемонстрировали, что вы уже пытались сделать это сами.

---

Тебе повезло, что я канадский, во всяком случае вот код:

HTML

<div class="container"> 
    <img class="imagesWithHover" src="http://placehold.it/300" /> 
    <div class="showMeOnImageHover"> 
     <div class="contentHolder"> 
      <div class="title">My Title</div> 
      <div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <img class="imagesWithHover" src="http://placehold.it/300" /> 
    <div class="showMeOnImageHover"> 
     <div class="contentHolder"> 
      <div class="title">My Other Title</div> 
      <div class="content">My other content is here yay it looks so nice woohoo</div> 
     </div> 
    </div> 
</div> 

CSS

.showMeOnImageHover { 
    background-color:rgba(170, 0, 170, 0.3); 
    font-family:Arial; 
    color:white; 
    text-align:center; 
    display:table-cell; 
    position:absolute; 
} 
.showMeOnImageHover>.contentHolder { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    margin:10px; 
} 
.showMeOnImageHover .title { 
    font-size:30px; 
} 
.showMeOnImageHover .content { 
    font-size: 16px; 
} 

JS

var numberOfImages = $(".imagesWithHover").length; 
var numberOfDivOverlays = $(".showMeOnImageHover").length; 
for (var i = 0; i < numberOfDivOverlays; i++) { 
    var width = $(".imagesWithHover:eq(" + i + ")").width(); 
    var height = $(".imagesWithHover:eq(" + i + ")").height(); 
    var left = $(".imagesWithHover:eq(" + i + ")").position().left; 
    var top = $(".imagesWithHover:eq(" + i + ")").position().top; 
    $(".showMeOnImageHover:eq(" + i + ")").css({ 
     width: width, 
     height: height, 
     left: left, 
     top: top 
    }); 
} 
$(".showMeOnImageHover").css("opacity", 0); 
$(".showMeOnImageHover").hover(function() { 
    $(this).animate({ 
     "opacity": 1 
    }, 500); 
}, function() { 
    $(this).animate({ 
     "opacity": 0 
    }, 500); 
}); 

---

Примечание: как я получаю ширина, высота, слева, сверху свойства, используя JQuery, в индекс каждого элемента с именем класса .showMeOnImageHoverбудет соответствует индексу изображения с классом .imagesWithHover (где индекс является индексом конкретного элемента в классе, которому он принадлежит, - по строкам: var numberOfImages = $(".imagesWithHover").length;иvar numberOfDivOverlays = $(".showMeOnImageHover").length;). Поэтому, если у вас есть 30 изображений и только 29 разделов с соответствующими именами классов, только первые 29 изображений будут иметь div, когда вы наведете их.Если вы хотите изменить это, вы можете получить свойства, получая братьев и сестер соответствующих дивы, используя что-то вроде следующего кода:

var property = $(".showMeOnImageHover").siblings(".imagesWithHover").property; 

где property является собственностью вы хотите получить доступ к (ширина, высота, левый , top)