Skip to main content
I
iangoulbourne
Known Participant
January 25, 2018
Question

Bootstrap Image Hover Overlay

  • January 25, 2018
  • 4 replies
  • 3804 views

Hello All,

I was looking to apply this image overlay hover from this site Tryit Editor v3.5

I realized when the Bootstrap CSS is applied to it, the small blue overlay that scrolls up is partially visual but it's supposed to be hidden until you hover over the image.   When I remove the Bootstrap CSS, it works great...But with the CSS....it causes that partial view. Any idea how I can hide that partial over until I hover over the image.

Thanks.

This topic has been closed for replies.

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 25, 2018

Another option is to use Bootstrap Tooltips to overlay text on top of an image.  I have a tutorial for that below.

Figure Captions with Bootstrap Tooltips - https://alt-web.com/

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 25, 2018

What if there's no mouse?  Touch screens need an onClick/Tap event trigger, not a mouseover. 

The good news is Bootstrap has a built-in Collapse function for showing & hiding elements on click.

Below is an example with a button.

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
This text is hidden until the button is clicked. 
</div>

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
January 25, 2018

Have you tried including the css AFTER the link to the Bootstrap default css file?

or re-naming the 'container' to something else like .hover_container??

<div class="hover_container">

<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">

<div class="overlay">

<div class="text">Hello World</div>

</div>

</div>

CSS:

.hover_container {

  position: relative;

  width: 50%;

  background-color: yellow;

}

.hover_container img {

  display: block;

  width: 100%;

  height: auto;

}

.hover_container .overlay {

position: absolute;

bottom: 0;

background-color: #008CBA;

overflow: hidden;

width: 100%;

height: 0;

transition: .5s ease;

}

.hover_container:hover .overlay {

height: 100%;

}

.hover_container .text {

color: white;

font-size: 20px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

text-align: center;

}

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
January 25, 2018

Could you share a link to your work in progress so the contributors here can see your code?

I
iangoulbourneAuthor
Known Participant
January 25, 2018

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap - Prebuilt Layout</title>

<!-- Bootstrap -->

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/custom.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div class="container">

  <div class="project-container">

   <img src="Images/home/projects/1/1-1.png" alt="Avatar" class="project-image">

   <div class="project-overlay">

  <div class="project-description">Hello World</div>

   </div>

  </div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery-1.11.3.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.js"></script>

</body>

</html>

CSS

.project-container {

  position: relative;

  width: 33%;

}

.project-image {

  display: block;

  width: 100%;

  height: auto;

}

.project-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: #008CBA;

  overflow: hidden;

  width: 100%;

  height: 0px;

  transition: .5s ease;

}

.project-container:hover .project-overlay {

  height: 100%;

}

.project-description {

  color: white;

  font-size: 20px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

}

O
osgood_
Legend
January 25, 2018

Your code doesnt seem to be giving me any issues:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap - Prebuilt Layout</title>

<!-- Bootstrap -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.project-container {

  position: relative;

  width: 33%;

}

.project-image {

  display: block;

  width: 100%;

  height: auto;

}

.project-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: #008CBA;

  overflow: hidden;

  width: 100%;

  height: 0px;

  transition: .5s ease;

}

.project-container:hover .project-overlay {

  height: 100%;

}

.project-description {

  color: white;

  font-size: 20px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

}

</style>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div class="container">

  <div class="project-container">

   <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="project-image">

   <div class="project-overlay">

  <div class="project-description">Hello World</div>

   </div>

  </div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices