Изменение цвета на линии изображения на парении

Question

У меня есть изображение, которое является ссылка:

Мой HTML выглядит следующим образом:

 <div class="imgholder"> 
     <a href="#" title="Home" class="imglink"><img src="/images/img1.JPG" alt="Image" class="img-responsive" id="electricone"> </a> 

      <div class="item1"> 
      <h1 class="slickfont1">Home</h1> 
      </div>  
     </div> 

Я знаю, что это похоже на простой вопрос, но что такое best Способ стиля ссылки изображения, чтобы он стал темнее, когда вы: наведите указатель мыши?

Лучше всего сделать ссылку на лирику и стиль, который с помощью li: hover? Или лучше всего нарисовать фактический div или фактической ссылки? Как бы выглядел мой css?

Answer 1

Дайте цвет фона вашего A элемента,
чем на .imglink:hover img{ } обрабатывать на изображение непрозрачность

примером может быть:

DEMO

a.imglink{ 
    background:   #000; 
    display:   inline-block; 
} 
a.imglink img{ 
    vertical-align:  middle; 
    transition:   opacity 0.3s; 
    -webkit-transition: opacity 0.3s; 
} 
a.imglink:hover img{ 
    opacity:   0.5; 
} 

Answer 2

Использование псевдо классы

.imglink { normal styling } 
.imglink:hover { background-color: (change background color); color: (change font color) } 

Если вы хотите изменить само изображение, которое нужно будет либо установить его в качестве фонового изображения и поменять его или использовать JQuery изменить СРК

Answer 3

Html

<div class="imgholder"> 
    <a href="#" title="Home" class="imglink"> 
    <img src="http://www.cancer-fund.org/images/share/diy/img_sample.gif" alt="Image" class="img-responsive" id="electricone"> 
    </a> 

     <div class="item1"> 
      <h1 class="slickfont1">Home</h1> 

     </div> 
    </div> 

CSs

.imglink 

{ 
    background-color:blue; 
} 
.imglink:hover 
{ 
    background-color:red; 
} 

.imglink:hover .img-responsive 
{ 
    opacity:0.4; 

} 

Demo