Как создать слой с другим цветом над изображением?

Question

Я делаю сетку с несколькими элементами в боковой панели сайта WordPress.
Каждый элемент сетки - это изображение с меткой ниже.
Моя цель - изменить изображение: Нормальное состояние изображения должно быть зеленым (# 66be2c), затем к прохождению курсора мыши изменится его исходное изображение.
Я пробовал использовать два физических изображения для двух состояний и накладывать их при необходимости. Но это решение очень расточительно ... загрузить два разных файла изображения не очень хорошо.

Есть ли способ добиться такого же эффекта более эффективным образом?

Это часть моей страницы кода:

<td style="width: 150px; text-align: center;"> 
    <p style="color: #66be2c;"> 
    <img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';"> 
    </p 
    <p style="color: #66be2c;">.NET</p> 
</td> 

РЕШЕНИЕ:

правильный способ сделать это создает Векторные изображения.

Что вам нужно, это графический редактор (например, Adobe Illustrator или других) и C компилятор (в частности, две библиотеки для XSLT)

Эти две ссылки, которые могут быть полезны: SVG-Stacking_Guide и GitHub-SVG-Stacking-Download

Надеюсь, это может помочь другим, у кого такая же проблема.

Answer 1

Это плохой подход,

Я не специалист в CSS или дизайне, но я думаю, что вы должны сделать:

<div class='overlay'></div> 
    <img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px"> 
</div> 

и поставь класс в CSS так:

.overlay { background-color: your_color; } 
.overlay:hover { background-color: transparent; } 

Answer 2

Вы можете наложить DIV с меньшей непрозрачностью на изображение, а затем зарегистрировать наведение так, чтобы покрытие div исчезло, а real появляется изображение.

<div class='cover'></div> 
<img id='your-image' /> 

CSS-для изображения будет как такового:

.cover{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: .7; 
    background: green; 
    /* additional transition effects */ 
    -webkit-transitions: all .3s; 
    -moz-transitions: all .3s; 
    transitions: all .3s; 
} 

.cover:hover{ 
    opacity: 0; 
} 

Примечание что покрытия DIV и изображение должно быть в же, содержащей div по отношению друг к Другие.

Answer 3

Для этого можно использовать селектор ::before. Это означало бы не использование дополнительной разметки и никакого javascript. Вы действительно выиграете от использования этого встроенного css.Посмотрите на CSS :: Before

HTML:

<table> 
<tr> 
<td> 
    <p> 
    <img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image"> 
    </p 
    <p>.NET</p> 
</td> 
</tr> 
</table> 

CSS:

td { 
    width: 150px; 
    text-align: center; 
} 

td p { 
    color: #66be2c; 
} 

.image { 
    width:50px; 
    height:50px; 
    position: relative; 
} 

.image::before { 
    content: ""; 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    top: 0; 
    left: 0; 
    background: green; 
} 

.image:hover::before{ 
    display: none; 
} 

В основном, это цели изображение с классом .image и кладет коробку 50 х 50px на сверху его с зеленым фоном. Когда вы затем наведите указатель мыши на него, он избавится от этого поля.

Вы можете увидеть эту работу в this fiddle