Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    2,138
    Thanks
    120
    Thanked 79 Times in 79 Posts

    flickr gradient ?

    example:
    https://www.flickr.com/groups/[email protected]/pool/

    when you hover over image, lower 1/4 or so, gets darker, so that white text is nicely visible even if background is white/whitish

    Anyone see how/where is that done there ?
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,329
    Thanks
    4
    Thanked 480 Times in 468 Posts
    As the internal contents are shown on hover, this is actually pretty easy to implement.

    Code:
    <div class="imageHover">
    	<img src="images/test.png" alt="test image">
    	<div>
    		<p>
    			Image description
    		</p>
    		<ul>
    			<li>Other information</li>
    		</ul>
    	</div>
    <!-- .imageHover --></div>
    Code:
    .imageHover {
    	position:relative; // so we can aPo the inner DIV
    	display:inline-block;
    }
    
    .imageHover div {
    	position:absolute;
    	bottom:0;
    	left:-999em;
    	width:100%;
    	color:#FFF;
    	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    }
    
    .imageHover:hover div {
    	left:0;
    }
    The DIV will auto-size to its image content in both width and height as it's inline-block, letting us aPo the DIV over the image relative to the parent. aPo elements by default adjust to the height of their content, so the gradient will just be the size of said content.

    In practice I would further enhace the shadow with a hair of text-shadow just to be sure, but otherwise that's the basics of this.

    -- edit -- oh, and I used the "slide it left" method for hiding it instead of display:none, as some search engines will ignore display:none content as it was absused in the past for content cloaking. This also opens the door to adding animations to it as you can then slide it into place, or delay the mouse-out left positioning to allow something like an opacity transition.

    See my modal dialog tutorial for an example of such an animation.

    https://cutcodedown.com/tutorial/modalDialogs

    Basically it would end up:

    Code:
    .imageHover {
    	position:relative; // so we can aPo the inner DIV
    	display:inline-block;
    }
    
    .imageHover div {
    	position:absolute;
    	bottom:0;
    	left:-999em;
    	width:100%;
    	color:#FFF;
    	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    	opacity:0;
    	transition:opacity 0.5s, left 0s 0.5s;
    }
    
    .imageHover:hover div {
    	left:0;
    	opacity:1;
    	transition:opacity 0.5s, left 0s;
    }
    Boom, fade in animation instead of it just popping into place.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    2,138
    Thanks
    120
    Thanked 79 Times in 79 Posts
    Thanks.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •