Problem with the Size (resolution) of my div-CodePudding

My problem is my div that is called .border, the only purpose of it is to make cool border effect around the 2 headlines in the middle-left of the landingp age picture. But you can see pretty good in the screenshot, that the .border is kind of attached to the picture and stretches out. I have really no clue how to make this border perfectly centered behind the text.

.home {
  margin: 3rem 6rem 3rem 6rem;
  background-image: url(img/Aliens\ Cows.jpg);
  background-repeat: no-repeat;
  background-size: inherit;
  min-height: 20rem;
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}

.layer-over-p {
  min-height: 20rem;
  z-index: 1;
  background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
  backdrop-filter: blur(6px);
}

.text-1 {
  text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
  margin-top: 4.5rem;
  margin-left: 8rem;
}

.text-1 a {
  font-size: 6rem;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-family: var(--ff-primary);
}

.text-2 {
  text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
  margin-top: -1.6rem;
  margin-left: 8.32rem;
}

.text-2 a {
  font-size: 1.6rem;
  text-decoration: none;
  color: rgb(189, 189, 189);
  text-transform: uppercase;
  font-family: var(--ff-primary);
}

.border {
  position: absolute;
  z-index: 2;
}


/* ANIMATIONS = Navbar   Home *******************************************/

.border {
  border-top: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  transition: border-top 0.5s ease-in-out, border-right 0.5s ease-in-out, border-bottom 0.5s ease-in-out, border-left 0.5s ease-in-out;
}

.border:hover {
  border-top: 3px solid var(--clr-accent);
  border-right: 3px solid var(--clr-accent);
  border-bottom: 3px solid var(--clr-accent);
  border-left: 3px solid var(--clr-accent);
}

<section >
  <div >
    <div ><a href="#">My Work</a></div>
    <div ><a href="#">See my Creations.</a></div>
  </div>
  <div ></div>
</section>

CodePudding user response：

As border needs some space, you need to define it even if it's not visible. To do that, define invisible border :

border: 3px solid transparent;

Then when you need to show it :

border-color: var(--clr-accent);

And for for transition :

transition: border-color 0.5s ease-in-out;

Also, you don't need to define it for each side as they all have the same value

CodePudding user response：

I moved your background CSS from layer-over-p into border and wrapped both your text elements in a div with some arbitrary amount of padding. I also added @Antoine Richard's answer of simplifying the border CSS to get this result:

.home {
  margin: 3rem 6rem 3rem 6rem;
  background-image: url(img/Aliens\ Cows.jpg);
  background-repeat: no-repeat;
  background-size: inherit;
  min-height: 20rem;
  box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}

.layer-over-p {
  min-height: 20rem;
  z-index: 1;
  
}

.text-1 {
  text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
  
}

.text-1 a {
  font-size: 6rem;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-family: var(--ff-primary);
}

.text-2 {
  text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
  margin-top: -1.6rem;
  margin-left: 8.32rem;
}

.text-2 a {
  font-size: 1.6rem;
  text-decoration: none;
  color: rgb(189, 189, 189);
  text-transform: uppercase;
  font-family: var(--ff-primary);
}

.border {
  position: absolute;
  background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
  backdrop-filter: blur(6px);
  z-index: 2;
  overflow: wrap;

}


/* ANIMATIONS = Navbar   Home *******************************************/

.border {
  
  border: 3px solid transparent;
transition: border-color 0.5s ease-in-out;
}

.border:hover {
 border-color: var(--clr-accent);
}

<section >
  <div >
    <div style = "padding: 65px">
      <div ><a href="#">My Work</a></div>
      <div ><a href="#">See my Creations.</a></div>
    </div>
    
  </div>
  
</section>

This appears to keep your text items centered both within your gradient background and border, if that is what you are looking for.