Hello. Help me make an effect. I have blocks with categories. When you hover on one of the blocks, you need to change the background of all the other blocks, including the one that you hover on.

Here is an example of how to do it:

enter image description here Source: http://www.veintidosgrados.com/work

And can it somehow be done with just one CSS ?

  • Yes you can. A smooth animation will provide you with a transition. w3schools.com/css/css3_transitions.asp - goodalien
  • Is it possible to learn more?) The transition is not very interesting .. but how to change the background on all elements when you use hover .. it would be interesting to take a look) - stepa
  • Hmm, well, there is a variation, but in the implementation of the difficult - goodalien

2 answers 2

One CSS unlikely. But I propose such a flexible solution. You can add as many points as you like, but the picture will be displayed normally:

 var items = document.querySelectorAll('.wallpaper__item'); items.forEach(function(item) { item.addEventListener("mouseover", function() { var bg_n = this.getAttribute('class').replace(/^.*wallpaper\_{2}item\_bg\-{2}(\d+).*$/, '$1'); document.querySelector('.wallpaper').classList.add('wallpaper_bg--'+bg_n); var bg_i = document.createElement('div'); bg_i.setAttribute('class', 'wallpaper__item-bg wallpaper__item-bg_img--'+bg_n); for(var i = 0; i < items.length; i++){ (function(i) { var item__bg = bg_i.cloneNode(true); item__bg.style.backgroundSize = (100 * items.length) + '% 100%'; item__bg.style.backgroundPositionX = '-' + (100 * i) + '%'; items[i].appendChild(item__bg); item__bg.classList.add('wallpaper__item-bg_show'); setTimeout(function() { item__bg.classList.remove('wallpaper__item-bg_show'); }, 500); })(i); }; }); item.addEventListener("mouseout", function() { var bg_n = this.getAttribute('class').replace(/^.*wallpaper\_{2}item\_bg\-{2}(\d+).*$/, '$1'); document.querySelector('.wallpaper').classList.remove('wallpaper_bg--'+bg_n); items.forEach(function(item) { var items__bg = item.querySelectorAll('.wallpaper__item-bg'); for(var i = 0; i < items__bg.length; i++){ (function(i) { items__bg[i].classList.add('wallpaper__item-bg_hide'); setTimeout(function() { if(items__bg.length > 0 && items__bg[i].parentNode){ item.removeChild(items__bg[i]); }; }, 500); })(i); }; }); }); }); 
 .wallpaper { display: flex; position: relative; width: 100%; } .wallpaper__item { position: relative; height: 400px; margin: 10px; background-color: black; flex: 1; cursor: pointer; } .wallpaper__item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } /* ПоявлСниС/исчСзновСниС */ .wallpaper__item-bg.wallpaper__item-bg_show { opacity: 0; animation: show 0.5s linear forwards; } @keyframes show { from {opacity: 0} to {opacity: 1} } .wallpaper__item-bg.wallpaper__item-bg_hide { opacity: 1; animation: hide 0.5s linear forwards; } @keyframes hide { from {opacity: 1} to {opacity: 0} } /* Анимация качания */ .wallpaper__item:nth-child(2n+2) { animation: size__type0 10s infinite; } .wallpaper__item:nth-child(2n+1) { animation: size__type1 10s infinite; } @keyframes size__type0 { from { transform: scale(1); } 50% { transform: scale(1.05); } to { transform: scale(1); } } @keyframes size__type1 { from { transform: scale(1.05); } 50% { transform: scale(1); } to { transform: scale(1.05); } } .wallpaper__item-bg_img--0 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg')} .wallpaper__item-bg_img--1 {background-image: url('http://www.anawalls.com/repic/image.php?src=http://www.anawalls.com/images/nature/sea-surface-calm-smooth-surface-light-night.jpg&h=540&w=960')} .wallpaper__item-bg_img--2 {background-image: url('http://www.ellf.ru/uploads/posts/2015-07/1437948968_001-ellf.ru.jpg')} .wallpaper__item-bg_img--3 {background-image: url('http://www.sunhome.ru/i/wallpapers/134/oboi-na-rabochii-stol-gorod.orig.jpg')} .wallpaper__item-bg_img--4 {background-image: url('http://anywalls.com/pic/201210/1366x768/anywalls.com-14971.jpg')} 
 <div class="wallpaper"> <div class="wallpaper__item wallpaper__item_bg--0"></div> <div class="wallpaper__item wallpaper__item_bg--1"></div> <div class="wallpaper__item wallpaper__item_bg--2"></div> <div class="wallpaper__item wallpaper__item_bg--3"></div> <div class="wallpaper__item wallpaper__item_bg--4"></div> </div>

Example on third-party editor: jsfiddle.net-sct48ty9

  • Thank you very much!!! Just magical))) - stepa

I figured out how to implement this task on a single CSS. This solution has its advantages.

Pros:

  1. Fewer use of resources with quick picture changes
  2. Smoother animation
  3. This is pompous cool :)

Minuses:

  1. Large amount of code
  2. Implementation difficulty
  3. Sophisticated size calculations
  4. There is no flexibility (for new blocks, you need to redo the calculations, and this is paragraph 3 )
  5. All items and calculations must be specified manually.

Example:

 .nav { display: flex; position: relative; width: 100%; justify-content: center; } .nav__item { display: block; position: relative; width: 102px; height: 400px; margin: 10px; background-color: transparent; transform: skewX(-10deg); z-index: 2; } .nav__list { display: flex; position: absolute; left: 0; width:100%; justify-content: center; } .nav__item-bg { display: block; position: relative; width: 102px; height: 400px; margin: 10px; background-color: black; transform: skewX(-10deg); z-index: 1; overflow: hidden; } .nav__item-img { display: block; position: absolute; left: -35px; top: 0; width: calc(100% + 70px); height: 100%; background-size: calc(400% - (35px * 4)) 100%; transform: skewX(10deg); opacity: 0; transition: all 0.3s; } .nav__item-bg:nth-child(1) .nav__item-img { background-position: 0%; } .nav__item-bg:nth-child(2) .nav__item-img { background-position: calc(-100% + 35px); } .nav__item-bg:nth-child(3) .nav__item-img { background-position: calc(-200% + 90px); } .nav__item-bg:nth-child(4) .nav__item-img { background-position: calc(-300% + 135px); } .nav__item-img:nth-child(1) {background-image: url(http://s00.yaplakal.com/pics/pics_original/4/6/8/8310864.jpg)} .nav__item-img:nth-child(2) {background-image: url(http://img1.liveinternet.ru/images/attach/c/6/93/550/93550371_MiosgKjpRqE.jpg)} .nav__item-img:nth-child(3) {background-image: url(http://bm.img.com.ua/nxs/img/prikol/images/large/9/3/309339_889006.jpg)} .nav__item-img:nth-child(4) {background-image: url(http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/7328.jpg)} .nav__item-bg:nth-child(1) .nav__item-img:nth-child(1) {opacity: 1} .nav__item-bg:nth-child(2) .nav__item-img:nth-child(2) {opacity: 1} .nav__item-bg:nth-child(3) .nav__item-img:nth-child(3) {opacity: 1} .nav__item-bg:nth-child(4) .nav__item-img:nth-child(4) {opacity: 1} .nav__item:hover ~ .nav__list > .nav__item-bg .nav__item-img {opacity: 0} .nav__item:nth-child(1):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(1) {opacity: 1} .nav__item:nth-child(2):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(2) {opacity: 1} .nav__item:nth-child(3):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(3) {opacity: 1} .nav__item:nth-child(4):hover ~ .nav__list > .nav__item-bg .nav__item-img:nth-child(4) {opacity: 1} /* Анимации */ .nav__item-bg:nth-child(2n+2), .nav__item:nth-child(2n+2) { animation: size__type0 10s infinite; } .nav__item-bg:nth-child(2n+1), .nav__item:nth-child(2n+1){ animation: size__type1 10s infinite; } @keyframes size__type0 { from { transform: scale(0.95) skewX(-10deg); } 50% { transform: scale(1) skewX(-10deg); } to { transform: scale(0.95) skewX(-10deg); } } @keyframes size__type1 { from { transform: scale(1) skewX(-10deg); } 50% { transform: scale(0.95) skewX(-10deg); } to { transform: scale(1) skewX(-10deg); } } 
 <div class="nav"> <!--<ΠŸΡƒΠ½ΠΊΡ‚Ρ‹>--> <a href="#" class="nav__item"></a> <a href="#" class="nav__item"></a> <a href="#" class="nav__item"></a> <a href="#" class="nav__item"></a> <!--<Π€ΠΎΠ½Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ²>--> <div class="nav__list"> <div class="nav__item-bg"> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> </div> <div class="nav__item-bg"> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> </div> <div class="nav__item-bg"> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> </div> <div class="nav__item-bg"> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> <div class="nav__item-img"></div> </div> </div> </div>

In this example, I did the inclination, as the author of the question in the example. There is another version with the preservation of the proportions of the background.

Version No. 1 (without preserving background aspect ratio): jsfiddle-1hpps872
Version number 2 (preserving background aspect ratio): jsfiddle-1hpps872-1
Version number 3 (without tilt): jsfiddle-1hpps872-2

  • Pictures are shown only on the second and last plate. without pointing dies are black, but must show the corresponding parts of the pictures - Grundy
  • @Grundy, noticed a mistake. There will be an opportunity - I will correct it - Yuri
  • Calc does not seem to work on apple systems. Yes, and do on technology in which there are no masks, as in this case, css, it's just a perversion. - user220409
  • @OlmerDale, for this it is better to use the option with the script. Do you have all the pictures displayed? - Yuri
  • No, not all. And to be precise, your implementation, although cool, is not identical to the original. In the original, the picture does not scale. - user220409