Search code examples
htmlcssimagetexthover

Create individual hover text with background color over circle photo grid elements, CSS/HTML

I have been struggling to create hover text and circular background color elements that appear over my circular image grid on my website. This requires some combination of the HTML and CSS I have I imagine. I think this is difficult for me due to the way I have the grid and positioning setup. So it is hard to position the overlap hover element properly...`Below is my HTML and corresponding CSS code. Thanks!!

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;
  /* Footer height */
}

.title {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 6vw/*550%90px*/
  ;
  color: #aa5129;
  margin-left: 11.75%/*205px*/
  ;
  padding-top: .5%/*10px*/
  ;
  padding-left: 4.25%;
}

.subtitle {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 2.666666667vw/*40px*/
  ;
  color: rgb(120, 120, 120);
  margin-left: 11.75%/*205px*/
  ;
  padding-top: .5%/*10px*/
  ;
  padding-left: 6.75%;
}

body {
  margin: 0;
}

.galleryhome {
  width: 75%;
  height: 100%;
  margin-top: 1%;
  margin-left: 18%/*300px*/
  ;
  margin-right: auto;
  margin-bottom: 1%;
}

.galleryhome img {
  transition: 1s;
  padding: 1%;
  width: 20%/*250px*/
  ;
  border-radius: 50%;
}

.galleryhome img:hover {
  color: #3d5d7a;
  transition: 0.2s;
  opacity: 0.75;
  transform: scale(1.07);
}

.side3 {
  height: 100%;
  width: 18%/*300px*/
  ;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: .5%/*20px*/
  ;
  /*padding-top: .5%20px;*/
  /* tweaked from https://creative.colorado.edu/~jogr5195/web/Portfolio/index.html */
}

.side3 a {
  font-family: 'Helvetica', 'Arial', sans-serif;
  padding: 6px 0px 20px 30px;
  text-decoration: none;
  font-size: 22px;
  color: rgb(120, 120, 120);
  display: block;
  padding-top: 1.2vw;
  /*padding-top: 20px;*/
  /* tweaked from https://creative.colorado.edu/~jogr5195/web/Portfolio/index.html */
}
<div id="page-container">
  <div id="content-wrap">

    <div class="title">name</div>
    <div class="subtitle">home</div>

    <div class="galleryhome">
      <a href="index.html"><img class="img h1" src="media/home/about.png" alt="" /></a>

      <a href="photog_pages/index.html"><img class="img h1" src="media/home/photo.jpg" alt="" /></a>

      <a href="Photography.html"><img class="img h1" src="media/home/photoproj.jpg" alt="" /></a>

      <a href="SoftwareProjects.html"><img class="img h1" src="media/home/software.png" alt="" /></a>

      <a href="GraphicDesign.html"><img class="img h1" src="media/home/art.png" alt="" /></a>

      <a href="HardwareProjects.html"><img class="img h1" src="media/home/hardware.png" alt="" /></a>

      <!--<a href="Travel.html"><img class="img h1" src="media/home/travel.png" alt=""/></a>-->

      <a href="Contact.html"><img class="img h1" src="media/home/contact.png" alt="" /></a>
    </div>
    <div class="side3">
      <a href="home.html"><img src="media/about_page/logo.png" alt="cornerLogo" width=87%></a>
    </div>
  </div>
</div>

Here is an example of what I want to do below. Thanks! This is my desired result if the image in the middle top image is hovered over.:

This is the normal state with no images being hovered over.:

This is some of the code I tried to experiment with but the positioning I couldn't get.

.galleryhome .overlay {
    transition: 1s;
    padding: 1%;
    width: /*12%*/ 20% /*200px*/;
    border-radius: 50%;
    opacity: 0;
}

.galleryhome:hover .overlay {
  opacity: 1;
}

.hover-text {
  color: black;
  font-size: 3em;
  font-family: Ubuntu;
  font-weight: bold;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.bio-photo {
  border-radius:50%;
  border: 20px solid #1565C0;
  display: block;
  width: var(--width);
  height: auto;
}

.img-hover {
  position: relative;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: var(--width);
  opacity: 0;
  transition: .5s ease;
  background: rgba(0,0,0,0.25);
  border-radius:50%;
  border: 20px solid #1565C0;
}

.img-hover:hover .overlay {
  opacity: 1;
}

.hover-text {
  color: black;
  font-size: 3em;
  font-family: Ubuntu;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
Solution

  • I had to do a bit of refactoring to your original code, and I have marked the new code areas with a /* new line of code */ or /* new block of code begin */ and /* new block of code end */. I hope this is what you are looking for:

    #page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;
}

.title {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 6vw;
  color: #aa5129;
  margin-left: 11.75%;
  padding-top: 0.5%;
  padding-left: 4.25%;
}

.subtitle {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 2.666666667vw;
  color: rgb(120, 120, 120);
  margin-left: 11.75%;
  padding-top: 0.5%;
  padding-left: 6.75%;
}

body {
  margin: 0;
}

.galleryhome {
  display: grid; /* new line of code */
  grid-template-columns: repeat(3, 1fr); /* new line of code */
  gap: 50px; /* new line of code */
  width: 75%;
  height: 100%;
  margin-top: 1%;
  margin-left: 18%;
  margin-right: auto;
  margin-bottom: 1%;
}

/* new block of code begin */
.galleryhome a {
  width: 100%;
  position: relative;
}

/* new block of code end */

.galleryhome a > img {
  transition: 1s;
  padding: 1%;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}


/* new block of code begin */
.galleryhome a > .details {
  width: 100%;
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-content: center;
  opacity: 0;
  transition: 1s;
}

.galleryhome a:hover {
  color: #3d5d7a;
}

.galleryhome a:hover img {
  opacity: 0.75;
  transform: scale(1.07);
}

.galleryhome a:hover .details {
  opacity: 1;
}

/* new block of code end */

.side3 {
  height: 100%;
  width: 18%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 0.5%;
}

.side3 a {
  font-family: 'Helvetica', 'Arial', sans-serif;
  padding: 6px 0px 20px 30px;
  text-decoration: none;
  font-size: 22px;
  color: rgb(120, 120, 120);
  display: block;
  padding-top: 1.2vw;
}
    <div id="page-container">
  <div id="content-wrap">

    <div class="title">name</div>
    <div class="subtitle">home</div>

    <div class="galleryhome">
      <a href="index.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 1</span>
      </a>

      <a href="photog_pages/index.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 2</span>
      </a>

      <a href="Photography.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 3</span>
      </a>

      <a href="SoftwareProjects.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 4</span>
      </a>

      <a href="GraphicDesign.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 5</span>
      </a>

      <a href="HardwareProjects.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 6</span>
      </a>

      <!--<a href="Travel.html"><img class="img h1" src="media/home/travel.png" alt=""/></a>-->

      <a href="Contact.html">
        <img class="img h1" src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="" />
        <span class="details">Image 7</span>
      </a>
    </div>
    <div class="side3">
      <a href="home.html"><img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="cornerLogo" width=87%></a>
    </div>
  </div>
</div>

    Link to JS Fiddle Text on hover image