CSS or JavaScript to Highlight Certain Area of Image Opacity

CSS or JavaScript to highlight certain area of image opacity

You could use background-position with absolutely positioned divs as follows:

CSS:

.container {
    position:relative;
    height:455px;
    width:606px;
}

.container div {
    position:absolute;
    background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}

.container .bg-image {
    opacity:0.3;
    height:455px;
    width:606px;
}

.container div.highlight-region {
    height:50px;
    width:50px;
    opacity:0;
}

.container div.highlight-region:hover {
    opacity:1;
}

HTML:

<div class="container">
    <div class="bg-image"></div>
    <div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
    <div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>

Please see http://jsfiddle.net/MT4T7/ for an example

Credit to beachphotos.com for using their image.

EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.

CSS changes:

.container div.highlight-region {
    height:50px;
    width:50px;
    border: 3px solid white;
}

/* removed :hover section */

How to put color on the image without affecting the transparent area?

Not perfect, but can be a beginning:

.base {  width: 300px;  height: 600px;  overflow: hidden;  position: relative;  background-color: lightgreen;}
.test {  width: 300px;  height: 200px;  background-image: url(https://i.stack.imgur.com/sklUO.png);  background-size: 100%;  position: absolute;    animation: move 12s infinite linear;}
.t1 {  top: 0px;  background-position: 0px 0px;  filter: sepia(100%) saturate(200) hue-rotate(40deg);}.t2 {  top: 200px;  background-position: 0px -200px;  filter: sepia(100%) saturate(200) hue-rotate(130deg);  animation-delay: -3s;}.t3 {  top: 400px;  background-position: 0px -400px;  filter: sepia(100%) saturate(200) hue-rotate(220deg);  animation-delay: -6s;}.t4 {  top: 600px;  background-position: 0px -600px;  filter: sepia(100%) saturate(200) hue-rotate(310deg);  animation-delay: -9s;}

@keyframes move {  from {  top: -200px;  background-position: 0px 200px;
  }  to {  top: 600px;  background-position: 0px -600px;
  }}

body {}

<div class="base"><div class="test t1"></div><div class="test t2"></div><div class="test t3"></div><div class="test t4"></div></div>

How to remove or hide opacity from the image in html?

Here is the trick.

1. Create an overlay with :before or :after pseudo element.
2. Apply css3 transformation.
3. Use large box-shadow and add overflow: hidden on parent to hide undesired part.

.image-holder {  display: inline-block;  position: relative;  vertical-align: top;  overflow: hidden;}
.image-holder:before {  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);  transform: skew(-25deg);  -webkit-transform: skew(-25deg);  -webkit-backface-visibility: hidden;  position: absolute;  width: 100px;  bottom: 20px;  content: '';  right: 100px;  top: 20px;}
.image-holder img {  vertical-align: top;}

<div class="image-holder">  <img src="http://placehold.it/450x200"></div>

Highlight a section of an image in JavaScript

Instead of using image maps, you could try this CSS method:

Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.

CSS:

#image { 
    position: relative; 
    width: 400px;
    height: 100px; 
    background-image: url(image_map.png); 
}

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent;  
}   

#map-part:hover { 
    background-color: yellow;           /* Yellow Highlight On Hover */
    opacity: 0.2;
    filter: alpha(opacity=20);      
}

HTML:

<div id="image">
    <a id="map-part" href="http://www.example.com/"></a>
</div>

Note that this will only work for rectangular links.

Trying to highlight a section of a .png using HTML/CSS/jQuery/JavaScript

You could do this vis something along these lines: jsFiddle example

HTML

<div id="container">
    <img src="http://www.placekitten.com/200/200" />
    <div id="highlight"></div>
</div>

CSS

#container {
    position:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

This example positions a div above an image within a container, and sets the background to be partially transparent using rgba. You can set the position, colors, opacity, etc. via JavaScript.

How to dim an image keeping transparency untouched with CSS or JS?

There is a relatively new CSS property filter which might achieve what you are after.

The brightness option seems to be what you are after.

EDIT - Added interim support for FF via URL

JSFiddle Demo (with brightness and contrast options)

CSS

img {
width:250px;
}
#one:hover {
    -webkit-filter:brightness(50%);
    -moz-filter:brightness(50%);
    filter: url(#brightness); /* required for FF */
    filter:brightness(50%);
}
#two:hover {
    -webkit-filter:contrast(50%);    
    -moz-filter:contrast(50%);
     filter: url(#contrast);
    filter:contrast(50%);
}

MDN on Filter

Support is non-IE see CanIUse.com

FF support (at the time of writing) requires definition of an SVG filter

Brightness @ 50%

<svg height="0" xmlns="http://www.w3.org/2000/svg">

    <filter id="brightness">
        <feComponentTransfer>
            <feFuncR type="linear" slope=".5" />
            <feFuncG type="linear" slope=".5" />
            <feFuncB type="linear" slope=".5" />
        </feComponentTransfer>
    </filter>

</svg>

Contrast @ 200%

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="contrast">
        <feComponentTransfer>
            <feFuncR type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncG type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncB type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
        </feComponentTransfer>
    </filter>
</svg>

---

Related Topics