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
Related
I know that it is possible to achieve this using jquery but I want an approach it without jquery since I am working with an angular app. What I want to do is when I hover over an img element, I want to put text-decoration: underline in div with class title. Keep in mind however that the elements are neither siblings nor adjacent to each other. Is it possible to achieve this in any way using CSS or maybe something of Angular?
<div class='big class'>
<div class='title'>
<p> This is a text that I want to be underlined when hovering over the img element </p>
</div>
<div>..........</div>
<div>..........</div>
<div>..........</div>
<img class='image' [src]="some image source"/>
</div>
Indeed, you don't need jquery, Angular has it all :)
You would need to add mouseneter and mouseleave events to the img tag with a property to set hovered state and change the class attribute on the title tag. The rest is in CSS
HTML:
<div class='big class'>
<div class='title' [class.foo]="hovered">
<p> This is a text that I want to be underlined when hovering over the img element </p>
</div>
<div>..........</div>
<div>..........</div>
<div>..........</div>
<img class='image' (mouseenter)="hovered=true" (mouseleave)="hovered=false"
[src]="some image source"/>
</div>
CSS
.foo{
text-decoration: underline;
text-decoration-color: red
}
Demo
Problem I've never run into. Searched without resolution but might not know the right search terms to use. So if already answered I beg pardon.
I had this html. (Kinda long so simplified)
<div class="movieabovewrap">
<div class="movieabove">
LINK TEXT
</div>
And I wanted the link to cover all of the movieabove div so I moved the link outside of it as in.....
<div class="movieabovewrap">
<a href="LINK">
<div class="movieabove">
LINK TEXT
</div>
</a>
(it seems to be cutting off the last end div on both)
Anyways when I moved the link outside the div all the sudden I get this vertical whitespace of about 10px above and below the divs which I assume is attached somehow to the a href element. Assuming as I can't get anything to show up when I inspect the elements. Is there someway to remove this vertical whitespace with css? It kinda trashes my design. :( Any help would be mucho appreciated.
Short answer: Using <span> instead of <div> inside <a> should do the trick for you.
Explanation: The a tag renders a text element, if you want it's children to also act as text elements they must have display: inline.
div elements have display: block by default.
span elements have display: inline by default.
Add display: block to the link, either inline or via css:
<div class="movieabovewrap">
<a href="LINK" style="display: inline-block;">
<div class="movieabove">
LINK TEXT
</div>
</a>
</div
or
.movieabovewrap > a {
display: inline-block;
}
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/
I need animated CSS button, something like on the picture,
You can find that buttons here: http://todomvc.com/
Something similar to this:
You could try placing a div inside the button like so:
<button>
<div>
Button
</div>
</button>
And then set the div to animate to width: 100% and background: red
For the red line underneath, maybe an animation where you set the border-bottom property
I have a grid of elements over which I have an h1 text tag. Each of the grid elements has a hover action, and I would like to activate that hover action for the grid elements below the text. However, I cannot put the z-index of the grid elements higher, as that would obscure the text.
A basic idea of the html: (and here's an actually useful JSFiddle link: http://jsfiddle.net/evd3v/)
<div id="background" class="header">
</div>
<div id="overlay">
<table>...</table> <!-- A grid that covers the background image -->
</div>
<h1 id="title" class="title">My Page Title</h1>
<h2 id="detail" class="title">Designed by Me</h2>
You can make the h3 ignore mouse (pointer) events with
h3{ pointer-events:none; }
but this only works with FF/Chrome/Webkit
Set the background of the grid elements to background: transparent and then give them a higher z-index?