-5

I'd like to change the background image of the body (or my section) on link hover as in this example:

http://www.passion-pictures.com/paris/directors/

Is there any way to do it without using JS.

I only know how to code HTML/CSS

EDIT :

When I Hover on the first link (Michelle) it changes the background of my section as expected. But when I hover on the second link (Franck) the top of my second link background begins under my first link. So the top of my default background is still visible. My links are displayed vertically

MNP-USER
  • 1
  • 2
  • Don't think that is possible. The name of css says it: *Cascading* Style Sheets. You cant move back up the dom tree. – Mark Baijens Oct 30 '18 at 10:21
  • @MNP-USER Post your code so far what you have done. And In the given link they used Plugin. They are some plugins you can use like owl-carousel also. – Mehraj Khan Oct 30 '18 at 10:25
  • You can see the only ways to access other elements in CSS in [this question](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered). – Maytha8 Oct 30 '18 at 10:53
  • @Meraj Khan what is the plugin they use? – MNP-USER Oct 30 '18 at 18:08

2 Answers2

1

It is possible but there will be too much HTML code and CSS workarounds.

if you still want in CSS only then refer this code - change css background on hover

HTML code

<div class=container>
  <div class="link">
    <a href="#" class="bg1">bg1</a>
    <div class=background></div>
    <a href="#" class="bg2">bg2</a>
    <div class=background><div>
  </div>
</div>

CSS Code

div.link > a {
  displya: inline-block !important;
  position: relative !important;
  z-index: 5;
}

.bg1:hover + .background {
  background: red;
}

.bg2:hover + .background {
  background: green;
}

.background {
  background: transparent;
  position: absolute;
  width:100%;
  height: 100%;
  top:0;
  left: 0;
}

This will give you an idea of implementation but I'll suggest you go with JS that is a much better way of doing it.

Mohit Mishra
  • 87
  • 1
  • 10
  • Hello, your solution seems to work, but I would like to have my text link vertically aligned and in the center of the page. I've tried to change it in "div.link > a" but it doesn't work. And I also can't change the size of the font. Could you help me? – MNP-USER Oct 30 '18 at 19:47
  • sure let me make changes and I'll share it with you – Mohit Mishra Oct 31 '18 at 07:00
  • Actually, it's OK, I've solved my problem ! Thanks for the code you gave me, it really helped me !!! – MNP-USER Oct 31 '18 at 15:03
1

Hope this might help you

HTML

<div class="container">
    <a href="#" class="bg1">bg1</a>
</div>

CSS

.bg1:hover::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  z-index: -1; /* index would get changed based on your need */
}
Maytha8
  • 846
  • 1
  • 8
  • 26
Nattamai Jawaharlal Manikandan
  • 226
  • 1
  • 8