CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
loganrussell48
loganrussell48

Reputation: 1864

Overlay Image with text with Bootstrap 4

I'm very new to web development so have mercy with your responses.

I have a grid of images that I want to modify. When the mouse hovers over an image, I want an overlay with text to appear over the image (this may require the cell in the grid to expand to contain all the text).

When the image with the overlay is clicked, it should open a modal (I already have this working) with the full text and info inside.

All changes need to look smooth with transitions (overlay shouldn't just be there when the mouse touches, it should animate in, etc.) when they enter/exit.

I'm not sure what the right terminology is for this, so I'm struggling to find info searching on Google. So, if you could provide me with some resources to learn this, or provide some examples, it'd be much appreciated. Thanks in advance :)

Edit: Here's close to what I want to happen There will be an image, like this:an image in a grid

After the mouse hover over this image, an overlay should animate in to look like this: overlay showing over top of image in grid

The difference between this and what I want, is I want to show text instead of an icon, and I also want the cell in the grid upon which the mouse is hovering to expand to more pleasantly present the text that will be shown on the overlay.

Upvotes: 7

Views: 32774

Answers (4)

Harsh Patel
Harsh Patel

Reputation: 1334

try below css for manage "simple overlay text", "display overlay text only on hover event", "simple overlate with Bg"

.img-container {
    position: relative;
    display: inline-block;
}

.img-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container .overlay.overlay-bg:not(.hover-overlay) {
    background: rgba(0, 0, 0, 0.35);
}

.img-container .overlay.hover-overlay {
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

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

.overlay span {
    position: absolute;
    color: #fff;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<body>
    <div class="container">
      <div class="row">
        <div class="col-6"> 
          <span>simple overlay text</span>
          <div class="img-container">
            <img src="http://via.placeholder.com/300x300" class="img-thumbnail">
            <div class="overlay align-items-end">
              <span class="text-danger mb-2">overlay content</span>
            </div>
          </div>
        </div>
        <div class="col-6">    
          <span>simple overlay text with Bg</span>
          <div class="img-container">
            <img src="http://via.placeholder.com/300x300" class="img-thumbnail">
            <div class="overlay overlay-bg">
              <span>overlay content</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-6">    
          <span>on hover overlay text</span>
          <div class="img-container">
            <img src="http://via.placeholder.com/300x300" class="img-thumbnail">
            <div class="overlay hover-overlay">
              <span>overlay content</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

Upvotes: 0

Montaycabe
Montaycabe

Reputation: 121

Set image as "block"

.img-container{
  position:relative;
  display:inline-block;
}
.img-container img{
display:block
 }
.img-container .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgb(0,170,170);
  opacity:0;
  transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
  opacity:1;
}
.overlay span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
}
<div class="img-container">
  <img src="https://placehold.it/300x300">
  <div class="overlay">
    <span>overlay content</span>
  </div>
</div>

Upvotes: 2

Steve K
Steve K

Reputation: 9055

You can do this with just css first you need to wrap your image in a div and set the position to relative. Then place the image and the overlay inside of it. Then you can use css transitions to achieve the desired effect. You will set the original opacity of the overlay to 0 and set the hover opacity to 1. Below is an example. Since you haven't posted any code I can't tell what your markup will be so I just made an example.

.img-container{
  position:relative;
  display:inline-block;
}
.img-container .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgb(0,170,170);
  opacity:0;
  transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
  opacity:1;
}
.overlay span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
}
<div class="img-container">
  <img src="https://placehold.it/300x300">
  <div class="overlay">
    <span>overlay content</span>
  </div>
</div>

Upvotes: 18

lacostenycoder
lacostenycoder

Reputation: 11226

Sounds like you're looking for tooltip, see https://getbootstrap.com/docs/4.0/components/tooltips/

Upvotes: 0

Related Questions