Ссылка на текстовое изображение hover

Question

Я пытаюсь написать код, который показывает текст поверх изображения, и я пытаюсь добиться эффекта зависания. Я размещаю код на http://codepen.io/kikibres/pen/LVxmBG, чтобы вы могли посмотреть, как он работает. Как вы можете видеть, когда вы наводите курсор на изображение, оно затемняется, но текст фона не изменяется. Аналогично, когда вы наводите курсор на текстовый фон, эффект изображения не активируется. Я хотел связать их вместе, но как? Похоже, мне, возможно, придется редактировать html, я думаю?

Html код:

<div class="fourcolumns"> 
     <div class="productpic"> 
      <a href="#"> 
      <img src="http://i.imgur.com/SZen19w.png" alt="Scuba"> 
      <h2 class="captioncolumn"><span>SCUBA</span></h2> 
      </a> 
     </div> 
</div> 

CSS код:

.fourcolumns { width: 100%; position: relative; margin: 40px 0;} 
.productpic { width: 25%; float: left; display: inline-block; position: relative; margin: 0; padding: 0; background-color: #000000;} 
.productpic a { } 
.productpic img { width: 100%; opacity: 1;} 
.productpic img:hover { opacity: 0.5;} 
.productpic .captioncolumn { width: 80%; /*height: 50px;*/ background-color: #ffffff; position: absolute; top: 20px; left: 0; opacity: 1; padding: 5px 0 5px 20px;} 
.productpic .captioncolumn span { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 36px; position: relative; color: #2a286a; opacity: 1; } 
.productpic .captioncolumn:hover { opacity: 0.5;} 

Answer 1

Все это сводится к ссылке, которая связывает все вместе, чтобы независимо от того, в какой области окна зависало, все активировано, а не одна область, когда зависало, демонстрируя эффект зависания и другие области, не показывающие эффект наведения. Тем не менее, я не хочу, чтобы текстовое поле было затронуто в эффекте зависания. Поэтому я огляделся вокруг, чтобы сделать только дочерний элемент, активированный внутри родительской ссылки. Вот ответ:

.productpic a:hover img { opacity:0.5; } 

Вы также можете увидеть окончательный результат на http://codepen.io/kikibres/pen/MwJzqO?editors=110

Answer 2

Okay.As на ваш комментарий предложение заключается в использовании ПУТЬ

.productpic img:hover + h2{ background:transparent;} 
.productpic img:hover { 
    opacity: 0.5; 
} 

link

Answer 3

Используйте это, чтобы помочь .productpic img: hover .productpic .captioncolumn, .productpic img {opacity: 0.5;}