CODEWITHSUNDEEP
htmlcss
Yash Mistry
Yash Mistry

Reputation: 25

Text not showing up on hover over Image

Building my portfolio site and trying to show project name on hover over the image. I found some css people use to achieve this but does not work on my site for some reason. What could I be doing wrong?

.portfolioImage-half {
  display: inline-block;
  margin: 25px 5px;
  width: 30%;
  background-color: #111;
  overflow: hidden
}
.portfolio-half {
  width: 100%;
}
.portfolioImg {
  transition: all .3s ease-in-out;
}
.portfolioImg:hover {
  opacity: .2;
  transform: scale(1.1);
  cursor: pointer;
}
span.text-content {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.text-content {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}
.portfolioImage-half:hover span.text-content {
  opacity: 1;
}
<div class="row">
  <div id="workBlock" class="portfolio-block fixed-bg dark-bg">
    <div class="row portfolioRow">
      <div class="portfolioImage-half">
        <img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
        <span class="text-content"><span>Place Name</span></span>
      </div>
      <div class="portfolioImage-half">
        <img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 1618

Answers (2)

vicgoyso
vicgoyso

Reputation: 616

No you cannot style the img alt attribute.

Try:

  • adding a "z-index: 1; position: absolute;" to the .portfolioImage-half:hover span.text-content class.
  • Then add a "z-index:0; position: relative;" to the .portfolioImage-half class

You will most probably need to position the "span.text-content" element by using "Left"/"Right" properties

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Try using CSS Flexbox. Make your

  • .text-content a flex container using display: flex;
  • Give .portfolioImage-half position relative
  • Give width & height in %ages

Like:

.portfolioImage-half {
  position: relative;
}

span.text-content span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

Have a look at the working snippet below:

.portfolioImage-half {
  position: relative;
  display: inline-block;
  margin: 25px 5px;
  width: 30%;
  background-color: #111;
  overflow: hidden
}

.portfolio-half {
  width: 100%;
}

.portfolioImg {
  transition: all .3s ease-in-out;
}

.portfolioImg:hover {
  opacity: .2;
  transform: scale(1.1);
  cursor: pointer;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

span.text-content span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
}

.portfolioImage-half:hover span.text-content {
  opacity: 1;
}
<div class="row">
  <div id="workBlock" class="portfolio-block fixed-bg dark-bg">
    <div class="row portfolioRow">
     <div class="portfolioImage-half">
     <img src="http://placehold.it/100x100" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
       <span class="text-content"><span>Place Name</span></span>
     </div>
     <div class="portfolioImage-half">
       <img src="http://placehold.it/100x100" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
     </div>
   </div>
 </div>
</div>

Hope this helps!

Upvotes: 1

Related Questions