Linked photo inside grid opacity

Question

I built grid photo gallery.

I turned each photo to link.

I want every background image is change it opacity while hover.

(example of site : http://www.natura.co.il/).

Additionally, I can't move the text over the photo from top to bottom.

Thanks for helpers!

HTML:

<div id="flexCatalog">
  <a href="#" class="section" id="r1s1"><p id="gridText" class="pageTexts">Copiers / Combined A3 Black & White</p></a>
  <a href="#" class="section" id="r1s2"><p id="gridText" class="pageTexts">Photocopiers / Multifunction A4 integrated</p></a>
  <a href="#" class="section" id="r2s1"><p id="gridText" class="pageTexts">Color / Multifunction Copiers</p></a>
  <a href="#" class="section" id="r2s2"><p id="gridText" class="pageTexts">Black and white laser printers</p></a>
  <a href="#" class="section" id="r3s1"><p id="gridText" class="pageTexts">Contact Us </p></a>
  <a href="#" class="section" id="r3s2"><p id="gridText" class="pageTexts">Color Laser Printers</p></a>
  <a href="#" class="section" id="r3s3"><p id="gridText" class="pageTexts">Office Supplies</p></a>
</div>

CSS:

#flexCatalog {
  width: 100%;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
}

.section {
  display: block;
  position: relative;
  height: 200px;
}

#r1s1{
  width: calc(100% / 12 * 8);
  background: url("../images/catalog1.jpg");
}

#r1s2{
  width: calc(100% / 12 * 4);
  background: url("../images/catalog2.jpg");
}

#r2s1{
  width: calc(100% / 12 * 6);
  background: url("../images/catalog3.jpg");
}

#r2s2{
  width: calc(100% / 12 * 6);
  background: url("../images/catalog4.jpg");
}

#r3s1{
  width: calc(100% / 12 * 3);
  background: url("../images/catalog5.jpg");

}

#r3s2{
  width: calc(100% / 12 * 4);
  background: url("../images/catalog6.jpg") center center;
}

#r3s3{
  width: calc(100% / 12 * 5);
  background: url("../images/catalog7.jpg");
}

#gridText {
  display: inline-block;
  position: relative;
  top:0 90%;
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.7);
}

Martin Schulz · Answer 1 · 2018-10-12T22:14:38.087

You can't change opacity of background image. You can use something like .section:hover { opacity: ... } For the text position, you can use #gridText { position: absolute; }.

But there is a better way -- add an <img /> tag into your markup instead of using background image. Then the text will be automatically placed under the image.

Also, if an image is your content, not a piece of decoration, it is better to use <img> instead of background, because then such things like search google for this image and open image in new tab will be available.

score 0 · Answer 2 · answered Jul 17 '18 at 13:11

0

.section {
  transition: .2s easeIn;
  will-change: opacity;
}

.section:hover {
  opacity: .9;
}

Should do the trick. Or you can as well debug the example you provided to find the exact behavior

answered Jul 17 '18 at 13:11

t3__rry

2,817
2
23
38

Worked well. What do you mean about debugging? – Ofek Biton Jul 17 '18 at 13:23
Glad it did. Regarding dev tools: https://developers.google.com/web/tools/chrome-devtools/ you really should master it, it'll make your dev experience 100 times better, it's really powerful – t3__rry Jul 17 '18 at 13:30

Linked photo inside grid opacity

2 Answers2