Develop Reference

CSS Effects, Hover over a div Container and all the other div Containers lower the opacity [duplicate]

This question already has an answer here:
Change opacity on all elements except hovered one
(1 answer)
Closed 2 years ago.
I am working on a Website where I created 5 different Blocks with a div container. Now I added a CSS effect which makes the div container pop up if you hover over it.
.site-block {
position: relative;
width: 18%;
height: 345px;
background-color: #23253b;
margin: 8px;
border-radius: 12px;
top: 0;
transition: 0.5s;
}
.site-block:hover {
transform: scale(1.06);
}
HTML for 1 Block
<div class="site-block">
<div class="site-logo">
<img src="img/sites/csgoempire-logo.png"/>
</div>
<div class="bonus">
<p>Get a free case!</p>
</div>
<br>
<div class="deposit-methods">
<img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
<img src="img/deposit-methods/eth-deposit.png" alt="CSGO" />
</div>
<div class="code">
<a>Primatcodes</a>
<img src="img/copy.png" alt="CSGO" />
</div>
<div class="site-url">
<a href="https://daddyskins.com/promo-code/Primatcodes">Claim
</a>
</div>
</div>
Now I want to add another effect which should blur out all the other blocks. So bassicaly if I hover over a block I want that block to pop out and have a opacity of 1 and the other 4 should lower their opacity to 0.2. Is that possible with CSS or Javascript? and if yes HOW
Looking forward to your answers!

Not sure if there is a CSS way, but here is a javascript native way using mouseenter and mouseleave events:
.container {
display:flex;
}
.site-block {
position: relative;
width: 18%;
height: 200px;
background-color: #23253b;
margin: 8px;
border-radius: 12px;
top: 0;
transition: 0.5s;
color: #FFF;
}
.site-block:hover {
transform: scale(1.06);
}
<div class="container">
<div class="site-block">
<p>AAA</p>
</div>
<div class="site-block"><p>AAA</p></div>
<div class="site-block"><p>AAA</p></div>
<div class="site-block"><p>AAA</p></div>
</div>
<!-- first try it like this, then move it to file, just make sure your HTML above js tag ☝️and its before </body> -->
<script>
const siteBox = document.querySelectorAll('.site-block');
siteBox.forEach(function(element){
element.addEventListener('mouseenter', function(event) {
siteBox.forEach((box) => {
if(event.target !== box) {
//box.style.opacity = 0.2;
box.style.backgroundColor = 'rgba(35, 37, 59, 0.2)';
box.style.color = '#000';
}
});
event.target.opacity = 1;
});
element.addEventListener('mouseleave', function(event) {
siteBox.forEach((otherBox) => {
otherBox.style.backgroundColor = 'rgb(35, 37, 59)';
otherBox.style.color = '#FFF';
});
});
});
</script>

JavaScript: setting main div tag height to zero which makes all the sub divs have a height of zero

I just want to use some css to make the height of a div 0 which also makes all the heights of the sub divs 0. I then want to call a javascript function which when clicked it makes the height of the main div 100%.
Here is the code that I have written:
HTML
<div class="menuTitle" id="ButtonsTopStyle" onclick="ButtonsTop">CONNECTING RODS</div>
<div class="buttonsTop" >
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
<div class="menuTitle" id="ButtonsBottomStyle" onclick="ButtonsBottom">CRANKSHAFTS</div>
<div class="buttonsBottom">
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
CSS
.smallButtons {
box-sizing: border-box;
margin-left: 10px;
height: 50px;
width: 50px;
margin-top: 15px;
background-color: white;
}
.menuTitle {
color: white;
font-family: "Arial";
text-align: center;
font-size: 30px;
padding-bottom: 30px;
padding-top: 30px;
}
.buttonsTop {
margin-left: 23px;
}
.buttonsBottom {
height: 0;
margin-left: 23px;
}
The css I have written doesnt make the height of the .buttonBottom zero they are still being displayed on the page. I don't want them to be displayed on the page
JAVASCRIPT
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "100%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "100%";
}
As you can see I want the buttonsBottom to not be visible on the page when it loads but when you click on the onclick="ButtonBottom" div it makes the height 100% and makes the onclick="ButtonsTop" div have a height of 0

Add an
overflow:hidden;
to your .buttonsBottom div
Your div is expanding in height to accommodate your content.
What I'd suggest is adding an additional class of
.hidden {
height: 0;
overflow: hidden;
}
to your CSS and then modifying your JavaScript to add/remove this class as needed.
The other option would be to use display: none; and display: block; instead of height. Which would be my preferred method as long as you aren't aiming for a transition effect on height when clicked.

try this :
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "0%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "0%";
}

Animating Multiple Divs

The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.
Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?
The HTML for this section:
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
The CSS for this section:
.high {
height: 200px;
overflow: hidden;
}
.port {
width: 100%;
height: 200px;
}
.slide {
background-color: rgba(74, 170, 165, 0.7);
color: white;
position: relative;
top: -34px;
height: 200px;
width: 100%;
padding: 20px;
text-align: center;
}
The JavaScript for this section:
$(document).ready(function(){
var portfolio = {
// moves div with text over portfolio picture on hover
hoverPort: function() {
$(".port").hover(function() {
$(".slide").stop().animate({"top" : "-110px"});
}, function() {
$(".slide").stop().animate({"top" : "-34"});
});
}, // end of hoverPort function
} // end of portfolio object
portfolio.hoverPort();
}); // end of document.ready

Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:
$(".port").hover(function() {
$(this).next('.slide').stop().animate({"top" : "-110px"});
}, function() {
$(this).next('.slide').stop().animate({"top" : "-34"});
});
Demo Snippet
$(".port").hover(function() {
$(this).next('.slide').stop().animate({
"top": "-110px"
});
}, function() {
$(this).next('.slide').stop().animate({
"top": "-34"
});
});
.col-md-6 {
float: left;
width: 50%;
padding:25px;
box-sizing:border-box;
}
.slide {
position: relative;
top: -60px;
color: white;
background: red;
font-size: 2em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>

You can use jQuery "eq" selector.
$(".port").eq(0).hover(function() {
$(".slide").eq(0).stop().animate({"top" : "-110px"});
});
Hovering over the first "port" will animate the first "slide".

Scrolling image gallery without jQuery

I have a scrolling image gallery as follows. The CSS lays out the images in a row that scrolls horizontally. Underneath, I have a row of the same images, but as thumbnails. I want to be able to click on a thumbnail, and scroll the correct image into view.
HTML:
<div class="images_container">
<img id="image_1" src="/image1.jpg">
<img id="image_2" src="/image2.jpg">
<img id="image_3" src="/image3.jpg">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail">
<img src="/image2.jpg" class="thumbnail">
<img src="/image3.jpg" class="thumbnail">
</div>
CSS:
.images_container {
overflow-x: scroll;
overflow-y: hidden;
max-height: 50rem;
white-space: nowrap;
}
.images_container.thumbnails {
max-height: 10rem;
}
.images_container img {
vertical-align: top;
height: 50rem;
}
.images_container.thumbnails img {
height: 10rem;
}
This works up to a point, but jumping to the id of the image is problematic. If the larger image is even a few pixels into the visible viewport, it can't 'jump' to it, as it seems to be technically on the screen.
Is there a way I can use Javascript to 'scroll' the whole image into view when I click on it's corresponding thumbnail? I don't have access to jQuery on this project, but am happy to use JavaScript to make this work.

You can try this , no change in CSS, i add an id in html and call to scrollTo function :
<script>
function scrollTo(image_id){
var topLeft = document.getElementById(image_id).offsetTop;
document.getElementById('container').scrollLeft = topLeft;
}
</script>
<div id="container" class="images_container">
<img id="image_1" src="/image1.jpg" height="500px" width="500px">
<img id="image_2" src="/image2.jpg" height="500px" width="500px">
<img id="image_3" src="/image3.jpg" height="500px" width="500px">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')">
<img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')">
<img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')">
</div>

To keep DOM cleaner I got this solution which requires only adding js
var elms = document.getElementsByClassName("thumbnail");
for (var i = 0; i < elms.length; i++) {
elms[i].onclick = function(event) {
event.preventDefault();
event.stopPropagation();
var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
var v = document.getElementById(id).getBoundingClientRect().left;
document.getElementsByClassName("images_container")[0].scrollLeft += v;
}
}
See on jsfiddle

Here's my attempt at a no (well, minimal) JS solution to a scrolling gallery. You could, in fact, remove the Javascript all together if you replaced the .active class with the :target pseudo-selector, allowing you to click your thumbnails to do the scrolling. It's just easier for me to do it this way through a fiddle
function removeClass(element, className) {
var classes = element.className.split(' ');
var key = classes.findIndex(function(name) {
return name == className
});
classes.splice(key, 1);
element.className = classes.join(' ');
}
function addClass(element, className) {
var classes = element.className.split(' ');
classes.push(className);
element.className = classes.join(' ');
}
setInterval(function() {
var current = document.querySelector('.images .image.active');
var next = current.nextElementSibling;
if (!next) {
next = document.querySelector('.images .image:first-child');
}
removeClass(current, 'active');
addClass(next, 'active');
}, 1500);
body {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
.images {
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
}
.image {
width: 100%;
height: 100%;
top: 0px;
position: absolute;
left: -100%;
float: left;
transition: 1s;
}
.image.active {
left: 0%;
}
.image.active ~ .image {
left: 100%;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
<div class='images'>
<div class='image black active'></div>
<div class='image red'></div>
<div class='image blue'></div>
<div class='image yellow'></div>
</div>
Essentially the way it works is by making the div.images container a certain height and width, and therefore all images inside it can be positioned as you want. We initially set all .image to left: -100%, so that they're completely off screen to the left. We then set .image.active as left: 0 so that it's on screen. We then use the ~ selector to say that all siblings that come after the current (.image.current ~ .image) should be left: 100%, so completely to the right. Add in a transition, and you have a completely CSS scrolling gallery. The JS only acts as a way to change what the current active image is, and you can replace that with :target if you want.
I used div's, instead of img tags because it's easier to provide a POC with div's and background colors, but it's worked well with images in the past. Just put an <img> tag inside those <div class='image'></div> tags

Toggle display:none with div in front of another div?

I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.

Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}

When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.

I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});