Results 1 to 5 of 5

Thread: fading image and showing text over it

  1. #1
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default fading image and showing text over it

    I'm looking for is a CSS code which will fade in few images when hovered on (images are placed in a table; each image should fade individually when the mouse is hovering on it), and then show a text over that image (different text for each image).
    Anyone can help?

    Thanks!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Google is a good place to start: http://www.google.com/search?q=css3+...iw=320&bih=382

    Have a look at some demos and tutorials and mix&match a few techniques til you get a combination you like.

    When you've go something together, and if you need further help, please provide a link to your page and any source tutorials you've implemented.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi Beverleyh,

    First of all thanks for your link! - it made big diffence including the right words. I did search for this but did not include the word "caption" but with your help I found just the right page I was looking for. It's here:
    http://www.hongkiat.com/blog/css3-image-captions/
    and the demo is here
    http://demo.hongkiat.com/css3-image-captions/index.html

    I modified the code for my entry page http://terrybraunstein.com/tb/ to the main site http://terrybraunstein.com/

    My main problem now is what I describe in a new thread (since it's a new topic) http://www.dynamicdrive.com/forums/s...960#post297960
    but I still have few questions on this one which I tried to solve but did not manage:

    Now that the rollover captions are covering the images on hover the only click-able area I managed to create is the caption text. I would like to have the whole caption box to have that link so that no matter where I click it opens the linked page.
    Is that possible?

    Regards,

    Marek
    Attached Files Attached Files

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Looks like its just a question of changing your markup - change this;
    Code:
    <div id="box-6" class="box">
    	<a href="http://terrybraunstein.com/portfolio/">
    		<img id="image-6" src="images/380px-wide_Public-Art.jpg" longdesc="Assemblages on Portfolio page." alt="Assemblages on Portfolio page." width="380" height="376"/>
    	</a>
    		<span class="caption scale-caption">
    			<h3>Assemblages</h3><a href="http://terrybraunstein.com/portfolio/">
    			<p>Click to vew Assemblages on the Portfolio page.</p>
    		</span>
    </div>
    To this;
    Code:
    <div id="box-6" class="box">
    	<a href="http://terrybraunstein.com/portfolio/">
    		<img id="image-6" src="images/380px-wide_Public-Art.jpg" longdesc="Assemblages on Portfolio page." alt="Assemblages on Portfolio page." width="380" height="376"/>
    		<span class="caption scale-caption">
    			<h3>Assemblages</h3>
    			<p>Click to vew Assemblages on the Portfolio page.</p>
    		</span>
    	</a>
    </div>
    And remove the unclosed anchor tag from the caption (grey)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    mr108 (08-08-2013)

  6. #5
    Join Date
    Oct 2014
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    try this code...

    img
    {
    opacity: 0.3;
    }


    Full source...Image Fading

    Lethal


    Quote Originally Posted by mr108 View Post
    I'm looking for is a CSS code which will fade in few images when hovered on (images are placed in a table; each image should fade individually when the mouse is hovering on it), and then show a text over that image (different text for each image).
    Anyone can help?

    Thanks!

  7. The Following User Says Thank You to lethalmarc For This Useful Post:

    daalevis (10-21-2014)

Similar Threads

  1. Image Thumbnail Viewer Text showing through picture
    By kaila54 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-25-2009, 03:50 PM
  2. Fading Message Scroller isn't fading all text content
    By rwilk in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-07-2008, 12:41 PM
  3. Fading Scroller: fcontent code showing
    By vrm in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 05-24-2006, 03:46 AM
  4. Help with Fading Text and Jumping Text
    By Strangeplant in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 04-17-2006, 09:04 PM
  5. fading slideshow; images not showing; CSS problem?
    By Steve in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-26-2005, 06:56 AM

Bookmarks

Posting Permissions

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