Skip navigation
TunedInMag
Currently Being Moderated

Image with Title/Description Hover on MouseOver

Dec 8, 2012 1:42 PM

Tags: #image #link #float #hover

Hello All,

 

So currently I am having trouble getting this perfect. I have an image that populates dynamically, as well as Title, Description and Link to the details page. The problem is the hover is not centered to the image, and in IE it doesn't always appear when you mouse over. If anyone could please help me out I would greatly appreciate it! I haven't been able to get this to work properly, and have been working on/off for a week.

 

Here is the html/php code:

 

  <div class="featured2">

    <h2>Featured </h2>

    <?php foreach ($feature as $featured) { ?>

  <div class="featured-pic2">

        <img src="image/<?php echo $featured['filename']; ?>" alt="" width="320" height="320" />

        <div class="title2">

        <a href="details.php?place=<?php echo $featured['link_name']; ?>">

        <span>

     <h2><?php echo $featured['name']; ?></h2>

  <p><?php echo substr($featured['description'], 0, strpos($featured['description'], '.')+1);?></p>

        </a>

        </span>

        </div>

        </div>

<?php } ?>

  </div>

 

And here is the CSS

 

.featured-pic2 {
position:relative;
float:left;
width:320px;
height:320px;
padding:5px 5px 5px 5px;
border:#F00 }

.title2 {
left:0px;
top:0px;
position:absolute;
float:left;
width: 325px;
height: 325px;
top:0px;
left:0px;
  }
 
.title2 a {
color: #FFF;
width: 320px;
height: 320px;
display: block;
text-decoration: none;
}

.title2 a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}

.title2 a span {
display: none;
padding:0px;
}

.title2 a:hover span {
display: block;
}

 
Replies
  • Currently Being Moderated
    Dec 8, 2012 3:31 PM   in reply to TunedInMag

    Hi -

     

    You are much more likely to get a quicker, more accurate answer if you post a link to an online version of your problem page and dependent files.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 9:34 AM   in reply to TunedInMag

    In your CSS, add the highlighted line below to .title2 a:hover

    .title2 a:hover {

    background:#000;

    opacity:.60;

    filter:alpha(opacity=60);

    padding: 5px;

    }

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 9:38 AM   in reply to Sudarshan Thiagarajan

    And for IE not showing it up, I assume you're checking in IE8.

     

    filter: alpha(opacity=value); will only show in IE5-7.

     

    For IE8, There is another line of code you should add without which it will display in quirks mode. The order of preference matters too. Add as follows to .title2 a:hover:

     

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // put this first!

    filter: alpha(opacity=60);                         // put this second!

    This will give you compatibility for all versions of IE.

     

    IE9 and 10 should be no problem with your existing code.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 11:46 AM   in reply to TunedInMag

    That is because your <a href..> comes after the <img> tag - hence IE takes that you're linking the content within <span> (heading & paragraph).

     

    Change that bit of code:

     

    <div class="featured-pic2">

    <a href="test.html">

            <img src="test.jpg" alt="" height="320" width="320">

                 <div class="title2">

                   <span>

                          <h2>TEST IMAGE</h2>

                          <p>TEST PARAGRAPH</p> </span>

    </a>

                    </div>

    </div>

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 12:44 PM   in reply to TunedInMag

        ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    You're missing a - here. It should be:

     

       

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    I guess this will return the color to grey.

     

    Regarding the padding being different in IE, can you include a CSS Reset to your code? That should ensure all browsers render it the way you intend it to, rather then in quirks mode.

     

    Look here for reset: http://meyerweb.com/eric/tools/css/reset/

     

    Grab the code, copy & paste it in a new CSS file. Then import that from within your existing CSS all the way at the top:

     

    /* Import CSS Reset File */

    @import url("css/reset.css");

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 1:02 PM   in reply to TunedInMag

    Well, reset is a good way to neutralize the browser's default quirks behavior. Usually, developers start with reset or some even write a custom-reset syntax, then work their way upwards.

     

    This is primarily because different browsers render CSS differently. Some like Chrome even have an user-agent code built-in to Webkit to make things worse sometimes if they are not specifically targeted and styled.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 10, 2012 9:16 AM   in reply to TunedInMag

    That is done with jQuery. The smoothness is because of easing in jQuery.

     

    Take a look here: http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption -using-jquery

     

    It has a live demo that I'm certain you'd like and also a tutorial along with source files you can use in your very own project.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 10, 2012 7:56 PM   in reply to TunedInMag

    Absolutely.

     

    Also, better than building own code and testing it on all browsers - saves that time you invest on that which you can use for something else on your site.

     

    This is usually x-browser compatible.

     

    Good luck!

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points