I've been wrangling with how to handle a hover event for a block element containing an image, a caption placed on top of the image via absolute positioning, and a pinterest pin it button which should display on hover (anywhere in the block element).
The issue is how best to handle the overlay transition when the element is hovered over, without the transition hiding the pinterest button. As can be seen from my snippet, I'm trying to apply a darkened background with opacity to the image on hover (but leaving the caption content clear to read). Unfortunately my code in the snippet results in the background applied on hover hiding the pinterest button.
I also want the pinterest pin it button to appear when the caption is hovered over - currently, if you remove the background transition from my snippet, you can see that the pinterest button appears only when hovering on the image directly - as the caption sits on top of the image in the stack, when you hover over the caption the pinterest button is hidden.
The html structure is simple and as below:
<div class="item">
<a href="#">
<div class="featured-image">
<img src="https://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg">
</div>
<div class="caption">
<h4>Blurb</h4>
<span class="button">Read More</span>
</div>
</a>
</div>
<script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
https://jsfiddle.net/yrssssk0/
Related
When I click on an icon, a popover shows.
I realize that there is delay set with the popover, but when I scroll, the popover moves as well.
How can I make it stay where the icon is and not work with scroll?
<md-badge class="current-plan-type__icon--badge" direction="right" [mdPopover]="tootltipTemplate" delay="10000"
popoverTrigger="MouseEnter">
<i class="cui-icon icon icon-info_16 current-plan-type__icon--info"></i>
</md-badge>
Just move tootltipTemplate outside of your scrolleable div it will be called even if is not at the same level.
I think you have this problem: the popover template inside of the scrolleable div.
<div #root>
<div #scrolleable>
<div #tootltipTemplate></div>
</div>
</div>
Then my suggetion is: moving out the popover template of the crolleable div.
<div #root>
<div #scrolleable>
</div>
<div #tootltipTemplate></div>
</div>
I hope it works for you.
I'm looking to have a div which shows just a h3 tag vertically aligned centre with a background image, which on hover shows a paragraph text block and button instead of the h3 element (so a straight swap) with a quick fade transition.
I can only see to find examples that swap on other elements.
Any ideas? Thanks!
<div class="col-lg-3">
<h3>Service Name</h3>
<p>This is the description of the service which explains what it's all about.</p>
<a class="button">Read More</a>
</div>
You can use CSS transition to give a fade effect. I tried to create something like you asked using just CSS. You can also add the show/hide with jquery. The transition css is from #Guillermo given here.
Check fiddle
I have a 2 divs. The first div disappears on hover and the second div takes its place. My second div contains a link inside. My problem is on mobile devices I can't see the content of the second div because when I click on the first div the hover effect on the link takes the lead.
<div class="boxInside">
<div class="content">
... some content
</div>
</div>
<div class="boxInsideHover">
<a href="exemple.com">
<div class="content">
... some content
</div>
</a>
</div>
What I want on mobile is one click to see the second div's content and another click after for the link.
Thank you
I want create the border show in the picture but i want to stay clickable the under picture of frame.
I use a div on the other div,it's work but under div is not clickable.
I use border image,but the corner of left bottom is not create like the picture.
Any other way?
http://i.stack.imgur.com/z8HSs.jpg
I am using .png picture that cut center of that png picture.
My code is this:
<div id="slideshow204" class="slideshow" style="position:absolute;top:22px;right: 34px;z-index: 1;">
......
</div>
<div class="decor"><img style="position: absolute;z-index: 4;" src="http://shakeri.info/images/logo/zendeginameh.png" alt="">
</div>
problem solved.
I must add
pointer-events: none;
to the png's div to clickable under div.
need detail?
Click through a DIV to underlying elements
Let's say I have a navbar with links:
<div class="navbar-inner navlinks">
<ul class="nav">
<li><a class="brand" href="#"><img src="img/logo.png" /></a></li>
<li> Accueil</li>
<li> Ouvrez</li>
<li> Decouvrir</li>
</ul>
</div>
This is made using Twitter Bootstraps, so the links sit within the navbar container and are all floated left as block elements, as you see in the typical navbar. The entire navbar has a background color of blue as defined in my navlinks class. It has a height significantly taller than the text of the links.
What I want is for the links to change the background color of their entire "area" when they are hovered over. Right now, when I add a hover option and a background color change, it only changes the background area over the text where the link is, which is barely noticeable. I want it to also change the color of the space above, below, and to the right of the text before the next link. I thought twitter's treatment of this as a block element would do that, but it doesn't seem to be working.
Or, you can define the height of the nav by adding padding to the 'a' tag, instead of the 'li', and then using the regular #menu a:hover.
I am not sure what you are really asking, but if you are adding a hover to the anchor a:hover maybe you just need to use the hover on link li:hover{}