CODEWITHSUNDEEP
javascripthtmlcss
max
max

Reputation: 623

How to "dim" certain area in a webpage

I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?

I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.

<div id="dimmer"></div> 

#dimmer
{
    background:#000;
    opacity:0.5;
    position:fixed; /* important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:9999; /* may not be necessary */
}

Upvotes: 1

Views: 4196

Answers (5)

Jonathan Bromels
Jonathan Bromels

Reputation: 44

It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.

Upvotes: 1

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Why the display is none?

Check this?

#dimmer {
  background: #111;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  z-index: 9999;
  /* may not be necessary */
}
#dimmer:hover {
  background: #000;
  opacity: 0.5;
  transition: opacity 1s ease;
  cursor: pointer;
}
<div id="dimmer">ok</div>

Upvotes: 0

xiix
xiix

Reputation: 162

Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.

I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.

I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.

Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.

If this sounds applicable, see this jsFiddle

Upvotes: 0

Tigger
Tigger

Reputation: 9130

Two ways, one really simple but I'm not 100% sure this is what you wanted.

First way, use CSS

.genericClassGivenToDivs, #idOfDiv {
    background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
    background:#aaa;
}

The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.

<html>
<head>
<style>
body {
    margin:1em;
    background:#ddd;
}
#contain {
    margin:auto;
    width:100%;
    max-width:720px;
    text-align:center;
}
#row1, #row2, #row3 {
    width:100%;
    height:48px;
    line-height:48px;
    color:#000;
    background:#fff;
}
#row2 {
    background:#eee;
}
#dim {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
    //console.log('over:['+ this.id +']');
    dimEl.style.top = this.offsetTop +'px';
    dimEl.style.left = this.offsetLeft +'px';
    dimEl.style.height = this.offsetHeight +'px';
    dimEl.style.width = this.offsetWidth +'px';
    dimEl.style.display = 'block';
}
window.onload = function() {
    var list = ['row1', 'row2', 'row3'];
    var e;
    for(x in list) {
        e = document.getElementById(list[x]);
        if (e) {
            e.onmouseover = over;
        }
    }
}
</script>
</body>
</html>

Upvotes: 0

Ali Elzoheiry
Ali Elzoheiry

Reputation: 1682

.area-to-dim {
  position: relative;
}

.dimmer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
}

HTML

<div class="area-to-dim">
  <div class="dimmer"></div>
</div>

Upvotes: 0

Related Questions