TechQA.

Images with Mouseover Hover: Transparent Boxes Not Same Size as Image

510 views Asked by At

I have some code that added a hover effect of a transparent box over my images with text overlay, however the transparent boxes are not snapping to the size of the images. The transparent boxes seem to be either too small (leaving the top and bottom of the image below to not go transparent) or far too large (causing my page to fall out of alignment entirely). It may be a box-sizing issue? I think I have it set up so that it should automatically become 100% the size of the image, but I may be missing something.

Link to my site: http://jchambliss.aisites.com/imd311/portfolio/sites.html

Necessary code is included here:

#preview {
  max-width: 100%;
  border-collapse: collapse;
}

#text {
  position: absolute;
  opacity: 0;
  max-width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Web Design Projects */
.sitesAds {
  position: relative;
  border-collapse: collapse;
}

.sitesAds:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}

.sitesTokyo {
  position: relative;
  border-collapse: collapse;
}

.sitesTokyo:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}

.sitesMobile {
  position: relative;
  border-collapse: collapse;
}

.sitesMobile:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}

.sitesRoux {
  position: relative;
  border-collapse: collapse;
}

.sitesRoux:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}
<!DOCTYPE html>
<html>
<head>
<link href="portfolio.css" rel="stylesheet" type="text/css">

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
    <![endif]-->
    
<link href="https://fonts.googleapis.com/css?family=Amita|Encode+Sans+Expanded|Leckerli+One|Merienda+One|Source+Sans+Pro" rel="stylesheet">
</head>

<body>

<div>

<table>
<tr>
   <td><a href="ads.html"><div class="sitesAds"><img src="images/ads.jpg" id="preview" alt="Banner Ads"/>
    <h3 id="text">Banner Ads</h3></div></a>
   </td>
   <td><a href="tokyo.html"><div class="sitesTokyo"><img src="images/tokyo.jpg" id="preview" alt="One Page Ad Site: Tokyo, Japan"/>
    <h3 id="text">One Page Ad Site: Tokyo, Japan</h3></div></a>
   </td>
</tr>
<tr>
   <td><a href="mobile.html"><div class="sitesMobile"><img src="images/mobile.jpg" id="preview" alt="Mobile App: Tea Shoppe"/>
    <h3 id="text">Mobile App: Tea Shoppe</h3></div></a>
   </td>
   <td><a href="roux.html"><div class="sitesRoux"><img src="images/roux.jpg" id="preview" alt="Roux Academy of Art, Media, and Design"/>
    <h3 id="text">Roux Academy of Art, Media, and Design</h3></div></a>
   </td>
</tr>
</table>
 </div>

</body>
</html>

html css image transparency boxsizer
Original Q&A
2

There are 2 answers

5
Saurav Rastogi On BEST ANSWER

Use width: 100% on img instead of max-width & remove padding: 0 from #text

make sure you should use unique ids for each h3 element as id cannot be the same on a single page

Example:

.sitesTokyo img {
  width: 100%;
}

#text {
  position: absolute;
  display: flex;
  align-items: center; /* For vertical centering */
  justify-content: center; /* For horizontal centering */
  opacity: 0;
  max-width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0; /* Remove padding */
  padding: 0; /* Remove margin */
}

Also have a look at the working snippet below:

#preview {
  max-width: 100%;
  border-collapse: collapse;
}

#text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  max-width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

/* Web Design Projects */
.sitesAds {
  position: relative;
  border-collapse: collapse;
}

.sitesAds:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}

.sitesTokyo {
  position: relative;
  border-collapse: collapse;
}

.sitesTokyo:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}

.sitesMobile {
  position: relative;
  border-collapse: collapse;
}

.sitesMobile:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}

.sitesRoux {
  position: relative;
  border-collapse: collapse;
}

.sitesRoux:hover #text {
  box-sizing: content-box;
  padding: 60px 0;
  opacity: 0.8;
  color: #663366;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms; 
}
<!DOCTYPE html>
<html>
<head>
<link href="portfolio.css" rel="stylesheet" type="text/css">

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
    <![endif]-->
    
<link href="https://fonts.googleapis.com/css?family=Amita|Encode+Sans+Expanded|Leckerli+One|Merienda+One|Source+Sans+Pro" rel="stylesheet">
</head>

<body>

<div>

<table>
<tr>
   <td><a href="ads.html"><div class="sitesAds"><img src="http://placehold.it/200x200" id="preview" alt="Banner Ads"/>
    <h3 id="text">Banner Ads</h3></div></a>
   </td>
   <td><a href="tokyo.html"><div class="sitesTokyo"><img src="http://placehold.it/200x200" id="preview" alt="One Page Ad Site: Tokyo, Japan"/>
    <h3 id="text">One Page Ad Site: Tokyo, Japan</h3></div></a>
   </td>
</tr>
<tr>
   <td><a href="mobile.html"><div class="sitesMobile"><img src="http://placehold.it/200x200" id="preview" alt="Mobile App: Tea Shoppe"/>
    <h3 id="text">Mobile App: Tea Shoppe</h3></div></a>
   </td>
   <td><a href="roux.html"><div class="sitesRoux"><img src="http://placehold.it/200x200" id="preview" alt="Roux Academy of Art, Media, and Design"/>
    <h3 id="text">Roux Academy of Art, Media, and Design</h3></div></a>
   </td>
</tr>
</table>
 </div>

</body>
</html>

Hope this helps!

0
izulito On

The issue is with your image size. The divs you hover over are bigger than the images. You have to set image width to 100%;

.sitesMobile img { width: 100%}

Related Questions in HTML

Related Questions in CSS

Related Questions in IMAGE

Related Questions in TRANSPARENCY

Related Questions in BOXSIZER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions