Question 46134 in CSS Question posted in
Some basic documentation can be found here.

How I can change background div on hover? – CSS

I can’t logically understand how to do this effect that you see in this url ("https://nteam.design/en/") in the "interior design, author’s supervision" section. That is, when I hover on the single card, how do I change the content of the entire div??

Is it possible to do it with css or is there other way?
Thanks in advance to anyone who can help me

.partitions__wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}

.partition {
  margin: auto;
  width: 60%;
  background-color: transparent;
  padding: 50px;
  text-align: center;
  height: 50vh;
}

.partition__title {
  padding: 80px 0;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: -80px;
}

.partition__text {
  font-size: 16px;
  line-height: 1.5;
}

.partition:hover {
  background-color: #ccc;
}

.border-button {
  text-decoration: none;
  font-family: "athens";
  display: inline-block;
  position: relative;
  padding: 12px 8px;
  color: #000;
  overflow: hidden;
  cursor: pointer;
  background-image: linear-gradient(to right, #000 33%, #0000 33% 66%, #000 66%);
  background-position: right bottom;
  background-size: 300% 1px;
  background-repeat: no-repeat;
}

.border-button:hover {
  background-position: left bottom;
  transition: background-position 1s;
}

a:hover {
  color: black;
}
<div class="partitions__wrapper">
  <div class="partition">
    <h2 class="partition__title">Partition 1</h2>
    <p class="partition__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="border-button">See more</a>
  </div>
  <div class="partition">
    <h2 class="partition__title">Partition 2</h2>
    <p class="partition__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a class="border-button">See more</a>
  </div>
  <div class="partition">
    <h2 class="partition__title">Partition 3</h2>
    <p class="partition__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a class="border-button">See more</a>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You can use the :hover pseudo-class selector to change the background of a div when it is hovered over.

    Example:

    div { 
    background-color: #000; 
} 
div:hover { 
    background-color: #FFF; 
}
    Login or Signup to reply.
  2. 0

    you can very well inspect the website that you mentioned, to check and understand the styles changing in states like :hover, :active, :focus, etc. in the styles pane of elements tab in browser dev tools. You already have applied these states in your code. What I see missing here is transition.

    You can put transition: background-color .5s ease,border-color .5s ease; in .partition and you’ll be able to see that effect.

    function changeBg(color) {
  document.querySelector(".partitions__bg").style.backgroundColor = color
  document.querySelector(".partitions__bg").style.opacity = "0.5"
}
    .partitions__wrapper {
  display: flex;
  align-items: center;
  background-color: transparent;
  z-index: 1;
    position: relative;
}

.partition {
  margin: auto;
  width: 60%;
  background-color: transparent;
  padding: 50px;
  text-align: center;
  height: 50vh;
transition: background-color .5s ease,border-color .5s ease;
}

.partition__title {
  padding: 80px 0;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: -80px;
}

.partition__text {
  font-size: 16px;
  line-height: 1.5;
}

.partition:hover {
  background-color: #ccc;
}

.border-button {
  text-decoration: none;
  font-family: "athens";
  display: inline-block;
  position: relative;
  padding: 12px 8px;
  color: #000;
  overflow: hidden;
  cursor: pointer;
  background-image: linear-gradient(to right, #000 33%, #0000 33% 66%, #000 66%);
  background-position: right bottom;
  background-size: 300% 1px;
  background-repeat: no-repeat;
}

.border-button:hover {
  background-position: left bottom;
  transition: background-position 1s;
}

a:hover {
  color: black;
}

.partitions__bg {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  z-index: 0;
}
    <div class="partitions__bg"></div>
<div class="partitions__wrapper">
  <div class="partition" onmouseover="changeBg('red')">
    <h2 class="partition__title">Partition 1</h2>
    <p class="partition__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="border-button">See more</a>
  </div>
  <div class="partition" onmouseover="changeBg('blue')">
    <h2 class="partition__title">Partition 2</h2>
    <p class="partition__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a class="border-button">See more</a>
  </div>
  <div class="partition" onmouseover="changeBg('green')">
    <h2 class="partition__title">Partition 3</h2>
    <p class="partition__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a class="border-button">See more</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search