cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
0
Upvote

Bootstrap Image Hover Overlay

iangoulbourne
Explorer ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

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.

Views

3.6K
Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
replies 6 Replies 6
latest latest Jump to latest reply
Jon Fritz Community Expert
Community Expert ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
iangoulbourne
Explorer ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

In Response To Jon Fritz

<!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;

}

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

In Response To iangoulbourne

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>

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

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;

}

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

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 & Moderator

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Jan 25, 2018 Jan 25, 2018

Copy link to clipboard

Copied

LATEST

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 & Moderator

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices