CODEWITHSUNDEEP
phphtmlcsswordpress
The Dude
The Dude

Reputation: 355

How to generate a layer of different color over an image?

I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change: the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.

There's a way to achieve the same effect in a more efficient manner?

This is a part of my page code: 

<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>

SOLUTION:

The correct way to do this is creating a Vector Image.

What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)

These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download

I hope this can be of help to others who have the same problem.

Upvotes: 0

Views: 123

Answers (3)

JoeP
JoeP

Reputation: 876

You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at 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;
}

Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.

You can see this working in this fiddle

Upvotes: 0

wilson
wilson

Reputation: 334

It's a bad approach,

I'm not an expert in CSS or design but i think you should do :

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

And put a class in CSS like this : 

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

Upvotes: 1

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears. 

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

The CSS for the image would be as such:

.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;
}

Note that the covering div and the image should be in the same containing div relative to each other.

Upvotes: 0

Related Questions