so i have a few divs inside divs like this:
<div class="flip-container">
<div class="flipper">
<a href="#" data-reveal-id="pc1">
<div class="inner" style="background-color:#ea6524;">
<p class="text">title</p>
<img src="1.png" class="img" />
</div>
</a>
</div>
</div>
DESCRIPTION:
now the flip-container and the flipper are used because when i hover this div i have a css transition triggered which flips the div.
the href simply allows to open a div with a description when the inner div is clicked
the inner div is a square with inside a text and an image.
WHAT I WANT TO DO:
i would like to hide the text "title" and the img "1.png" when i hover the flip-container.
how can i do this?
i tried to add display:hidden to the class text but it works only when i hover the actual text and not when i hover the flip-container background.
thanks for the help
i would prefer a pure css solution if possible, if not also a javascript solution could do.
This should do the trick:
.flip-container:hover .text, .flip-container:hover img {
display: none;
}
Alternatively, you could use visibility: hidden as this will keep the elements in the document flow, rather than removing them all together.
OP,
In this case, I'd suggest visibility:hidden over display:none;. Here's a fiddle with this approach: http://jsfiddle.net/wEr3T/1/.
In short, visibility:hidden will literally just hide the element(s)—still taking up the space it did before, thus not affecting the layout.
In contrast, display:none; causes it not to be rendered, thus the space it had previously occupied is now unaccounted for. As such, hovering to show/hide elements that have been set to display:none will likely cause some undesired flickering.
hiding the text and the image when hovering #flip-container by setting display: none may cause flashing and change in layout of the parent container. so instead make them transparent by set visibility: hidden.
.flip-container:hover img {
visibility:hidden
}
.flip-container:hover .text {
visibility:hidden
}
i have created jsFiddle for you.
Try this...
.flip-container:hover .text, .flip-container:hover img {
visibility: hidden;
}
<div class="flip-container">
<div class="flipper">
<a href="#" data-reveal-id="pc1">
<div class="inner" style="background-color:yellow;">
<p class="text" style="color:red">title</p>
<img src="//placehold.it/100x100" class="img" />
</div>
</a>
</div>
</div>
Related
I'm using React, and I centered an element horizontally and vertically using display: table and display: table-cell, with appropriate centering css.
Inside of it I have some content, when I add content to that element with javascript, the whole element recenters properly, but elements jump from their initial place to their next place.
I'd like to animate it in place, is that possible?
Going from this:
<div table>
<div table-cell>
<div>First Content</div>
</div>
</div>
to this:
<div table>
<div table-cell>
<div>First Content</div>
<div>Second Content</div>
</div>
</div>
(didn't include css to make it easy to read)
I'd do this by adding the new elements with a special class like:
<div table>
<div table-cell>
<div>First Content</div>
<div class="slide-in">Second Content</div>
</div>
</div>
Make the special class have max-height: 0. After it has been inserted into the DOM replace the maximum height with some large enough pixel value to fit the contents on screen. Make sure you have a transition on max-height.
.slide-in {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
I am trying to create next/prev button similar to flexslider default button.
But I want to do that using div and classes.
Fiddle is here
My mark up is shown below:
<div class="dirnav">
<div id="next"> Next </div>
<div id="prev" > Prev </div>
</div>
Default, the arrows must be invisible.
When hover the .dirnav the arrows must come inside from left and
right.
How can I do this ?
[EDIT: JSFIDDLE LINK UPDATED]
Add this code for elements
.dirnav {overflow: hidden;}
#next {margin-left: -30px;}
#prev {margin-right: -30px;}
.dirnav:hover #prev,
.dirnav:hover #next{margin: 0;}
I would like to have a logo (say .item-logo) being displayed in the circle when it is not being hovered upon, as hovering into the container will display the date.
HTML
<div id="main-content" class="container animated"> <div id="content">
<article class="post-65 post type-post status-publish format-standard hentry category-thoughts tag-example tag-standard tag-tag item-list">
<div class="post-format-icon">
<span><?php the_time('j') ?></span><small><?php the_time('M') ?></small>
</div>
You may take a look at the JS Fiddle here, the date is not seen as it's php. With that being said, the logo should change to the date when being hovered. http://jsfiddle.net/xJv5x/
Thanks!
This is really easy to achieve with CSS. Bascially you hide the image inside the anchor and show something else when you hover, e.g.
<a href="#foo">
<div>02-01</div>
<img src="http://placekitten.com/100/100" />
</a>
a div, a:hover img {display:none;}
a:hover div {display:block;}
and here is the fiddle: http://jsfiddle.net/gwDWS/
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}