Эффект наведения на изображение

Question

Я пытаюсь применить эффект наведения к изображениям в моей теме WP. Это сетка образов, созданных изображением на сообщениях.

сетка контролируется в content.php

<?php 
/** 
* controls main grid images 
*/ 
?> 

<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>> 

    <div class = "box-ovrly"> 
     <h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
     <div class="box-meta"><?php the_category(', '); ?></div> 
    </div> 

    <?php 
     $thumb = get_post_thumbnail_id(); 
     $img_url = wp_get_attachment_url($thumb,'full'); //get full URL to image (use "large" or "medium" if the images too big) 
     $image = aq_resize($img_url, 750, 560, true); //resize & crop the image 
    ?> 

    <?php if($image) : ?> 
    <a href="<?php the_permalink(); ?>"> <img class="img-responsive hover-decal" src="<?php echo $image ?>"/></a> 
    <?php endif; ?> 

</article><!-- #post-## --> 

Я хочу, чтобы превратить «коробчатого чрезмерно» Div в наложение поверх изображения, но не может найти соответствующие JS и CSS.

CSS-я прямо сейчас ...

.box-ovrly { 
z-index: 100; 
position: absolute; 
top: 0px 
left: 0px; 
} 

Это ставит название и категорию в верхней части изображения. Я хочу, чтобы у него был фон, чтобы покрыть изображение при наведении курсора, но не отображался вообще до тех пор, пока он не завис над

.

Прекрасный пример того, что я ищу (в конечном итоге, различные цвета фона и т. Д. Но я не знаю «т хотите любой текст на изображении, пока не парил) для на этом портфеле

http://redantler.com/work/

Answer 1

должен был сделать что-то подобное, но мы надеемся, что это работает для вас. Конечно, измените для своего использования. Это упрощенная версия

Ver. 1 (HTML, JS и CSS в ссылке, JS размещена здесь): http://jsfiddle.net/SnvMr/6/

$('.effect').hover(
    function() { 
     $('.effect').not(this).stop().fadeTo(500, 0.33); 
     $(this).find('p').fadeIn(500); 
    }, function() { 
     $('.effect').stop().fadeTo(500, 1); 
     $('.effect p').fadeOut(500); 
    } 
); 

Ver. 2: http://jsfiddle.net/deelite/SnvMr/12/

Answer 2

Вы можете добиться этого эффекта с помощью чистого CSS.

JSFiddle - http://jsfiddle.net/y3z4pojv/6/

В коде ниже, наиболее важной частью является .element:hover > .elementHover бит. Это означает «отображение .elementHover, которое является дочерним по отношению к .element, КОГДА .element находится в движении».

Просто проверьте, как HTML структурирован в этом примере и эмулирует это в коде WordPress. (Разумеется, с соответствующими именами для ваших элементов).

Тест CSS:

.element { 
    position: relative; 
    display: inline-block; 
    z-index: 0; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 
.strawberries { 
    background: url('http://images4.fanpop.com/image/photos/16300000/Delicious-pretty-fruit-fruit-16382128-670-562.jpg'); 
} 
.watermelon { 
    background: url('http://fyi.uwex.edu/safepreserving/files/2013/08/watermelon.jpg'); 
} 
.pineapple { 
    background: url('http://static.giantbomb.com/uploads/original/7/71129/2672509-6564604021-pinea.jpg'); 
} 
.element:hover > .elementHover { 
    opacity: 1; 
    z-index: 1; 
} 
.elementHover { 
    position: absolute; 
    opacity: 0; 
    z-index: -1; 
    height: 100%; 
    width: 100%; 
    -webkit-transition: all 500ms; 
    -moz-transition: all 500ms; 
    transition: all 500ms; 
} 
.hoverContent { 
    position: relative; 
    z-index: 10; 
    color: #fff; 
    font-size: 200%; 
    padding: 1em; 
} 
.hoverBackground { 
    position: absolute; 
    z-index: 5; 
    width: 100%; 
    height: 100%; 
    opacity: 0.8; 
} 
.green { 
    background: green; 
} 
.red { 
    background: red; 
} 

Тест HTML:

<div class="element strawberries"> 
    <div class="elementHover"> 
     <img class="hoverBackground" src="http://www.aux.tv/wp-content/uploads/2012/09/how-to-rick-roll-somebody.jpg"/> 
     <span class="hoverContent"> 
      Hello there 
     </span> 
    </div> 
</div> 
<div class="element watermelon"> 
    <div class="elementHover"> 
     <div class="hoverBackground green"></div> 
     <span class="hoverContent"> 
      Goodbye now 
     </span> 
    </div> 
</div> 
<div class="element pineapple"> 
    <div class="elementHover"> 
     <div class="hoverBackground red"></div> 
     <span class="hoverContent"> 
      ...Not yet 
     </span> 
    </div> 
</div> 

Обратите внимание, что вы можете просто иметь простой цветной DIV вместо IMG на парении, все, что вам нужно сделать это изменение IMG тег до DIV и установить фон .hoverBackground.