0

I have pictures in a horizontal scroll and I want to be able to hover over each image, and when I do, I want the picture to be slightly "grayed out" with text over it.

I can't for the life of me figure out how to do it.

I made this fiddle to show what my scroll bar looks like. https://jsfiddle.net/burgoyne/u1zdn80p/1/

#scroll {
height: 25%;
overflow-x: scroll;    
white-space: nowrap;
width: 50%;
}

#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}

Can someone point me in the right direction here? I have been trying different things with CSS to gray it out and add text, with no luck.

Thanks!

burgoyne
  • 143
  • 2
  • 15

3 Answers3

1

You have to specify what you want in a CSS img:hover rule, like this:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#scroll {
    height: 25%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 50%;
}

#scroll img {
    height: 100%;
    vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
  opacity: .5;
}
<div id="scroll">
    <a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
    --><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
    --><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
    --><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>
cFreed
  • 4,404
  • 1
  • 23
  • 33
  • Um, curious to why use opacity.. [ *I want the picture to be slightly "grayed out"* ] Why not `filter` and `grayscale()`? `filter: grayscale(50%);` – NewToJS Dec 14 '16 at 04:33
  • @NewToJS The OP states that he "has been trying different things with CSS (...) with no luck". So I choosed the 1st simple effect I'd in mind to illustrate the _path_ to act on its ``s: the `:hover` CSS pseudo-class. – cFreed Dec 14 '16 at 12:52
  • Ah nice, was just curious but then again I think using `opacity` would be better as some older browsers do not support `filter`. – NewToJS Dec 14 '16 at 12:57
  • @NewToJS In this domain you are likely in a better place than me to have a pertinent advice: as a rather back-end developper I'm not very much aware of all the graphic capabilities. Again, it's why I chose only a very simple one. – cFreed Dec 14 '16 at 13:16
0

About the gray color over the image, you can just add opacity to the image on hover ("opacity: 0.5") and, if you want, some transition between the event and the "grayness" with "transition: 0.5s" or so.

About the problem with the text overlay, I think you should visit this answer: Text on image mouseover?

Community
  • 1
  • 1
sebasaenz
  • 1,917
  • 2
  • 20
  • 25
0

You can place text inside with class named 

<span class="text-content"><span>Some text here</span></span>

and then u can use css to place text on the image, something like ...

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

I hope this helps.

Ashish Patel
  • 357
  • 4
  • 15
  • So your second block of code, I would add in line in my div, on whatever image I want to add text? And your second block of code, I add to my CSS? When I do that, it adds a square to the top left of the webpage with the text; Not over the image... I added #scroll img:hover { opacity: .3; } – burgoyne Dec 15 '16 at 19:51
  • to allow the image to partially fade when hovering over it. – burgoyne Dec 15 '16 at 19:52