CODEWITHSUNDEEP
htmlcsshover
burgoyne
burgoyne

Reputation: 163

Stop text from spanning entire scroll

I have a scroll bar with multiple images, that open a new link when each image is clicked. On hover, I have it set to "gray out" and text appears.

I cannot get that text to only pop up on the single image it is designed for, and all the images text appears as soon as you hover over any part of the div.

Here is a fiddle I made to explain: https://jsfiddle.net/burgoyne/u1zdn80p/

CSS: 

    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: .3;
}

#scroll .text {
position:absolute;
visibility:hidden;
}

#scroll:hover .text {
visibility:visible;
}

HTML

<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" class="hover"/><p class="text">Lake</p><!--

If anyone can figure out how to make the text only appear on a specific image, that would be great. Thanks!

Upvotes: 1

Views: 708

Answers (2)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

According to your fiddle you need set position relative and set height for anchor tag. and set display:table-cell. So for image you dont need that vertical-align:top to prevent white space.I remove the height of the scroll div. And most important you need to change the hover state #scroll to anchor tag(You can make any class or use css selector for this). Here is a Fiddle check the modified CSS part.

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

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

#scroll a {
  text-decoration: none;
  display: table-cell;/* this prevents vertical whitespace */
  height: 100px;
  position: relative;
  text-align: center;
}

#scroll a .hover {
  height: 100%;
  
}

 a:hover{
  opacity: .3;
}

.text {
  position: absolute;
  visibility: hidden;
  color: black;
  top: 0;
  width: 100%;
}

a:hover .text {
  visibility: visible;
  top: 0; z-index:4;
  margin-top: 41px;
 margin-bottom: 41px;
 
}
<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" class="hover" />
    <p class="text">Lake</p>
  </a>
  <a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" class="hover" />
    <p class="text">Sunset</p>
  </a>
  <a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" class="hover" />
    <p class="text">Garden</p>
  </a>
  <a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" class="hover" />
    <p class="text">Desert</p>
  </a>
</div>

Upvotes: 1

John McBride
John McBride

Reputation: 16

First off, please close your anchor tags <a href='foo'>bar</a>

Next, separate your images into separate divs and assign each a class='scroll' instead one big div with id='scroll'

see this js fiddle

Upvotes: 0

Related Questions