I'm trying to center align several crossfade icons within a widget. So far, I've only managed to align them either left or right. If I try to do anything else, it just stacks each icon vertically. Here's the CSS:
.icon {
float:left;
position:relative;
height:32px;
width:32px;
padding:4px;
}
.icon img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.icon img.top:hover {
opacity:0;
}
And the HTML for one icon:
<div class="icon">
<img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter-1.png" class="bottom" />
<img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter.png" class="top" />
</div>
I'm trying to do it with five icons, but can't figure it out. Seems to be a problem with how the crossfade effect stacks the images.
Here it is on JFiddle.
Try surrounding them with a 100% width div, removing float:left, and adding display:inline-block
http://jsfiddle.net/3on0x2Ly/2/
You can do that with one more div tag, which will wrap the icon. First you have to remove the float: left property of the class .icon.
Now one of the ways is to set the .icon class to inline block and the new div tag, which wrap them, you have to give it a text-align property to center. And that will center the each icons.
Here is the code - http://jsfiddle.net/syrup/3on0x2Ly/1/
Related
Currently having an issue with my button. I want to be able to center my 'a' tag but at the moment it will only stick to the left side. I have tried using "display:block" but this will make my button take up the full width of any div it's been put in.
HTML:
Apply Now
CSS:
.button {
padding:1em;
text-align: center;
display:inline-block;
text-decoration: none !important;
margin:0 auto;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Use a div to center the link
.button {
padding:1em;
text-align: center;
display:inline-block;
text-decoration: none !important;
margin:0 auto;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.container{
width: 100%;
text-align: center;
}
<div class="container">
Apply Now
</div>
Use the text-align: center; on a parent element to center align all the child elements inside it. They(child elements) do not have to be block level elements for the same. Your question has the concern that you do not want to take up the full space of the parent div by using display:block on your a tag.
You don't have to, even if you specify display:inline-block on your a tag and wrap it inside a parent with text-align: center;, it will solve your task.
Alternatively, you can use margin-left:25% or so, in case the above answer does not suit your need.
Feel free to drop in the code in case you need more help on this.
Thanks,
Yaman
I agree with Yaman, the easiest way I used is a < p > tag, just put it before and after your link
<p align="center">
Apply Now
</p>
the issue is simple. Just add a paragraph tag before the button and inside the tag, add the alignment. This should work
<p align="center">
Hi
If text-align: center does not work than You can add a style tag in the respective tag and use
justify-content: center;
I'm trying to figure out, how to have two divs that would react to onmouseover event. One should overlay with picture the other, whereas the bottom div should contain another image and other elements such as buttons, text etc. Could you please show me, how I need to adjust my code, to make it work?
HTML:
<div id="container">
<div id="bottom" >
<img id="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
<p id="text">
Hello World!
</p>
</div>
<div id="top">
<img id="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
</div>
CSS:
#container img {
position:absolute;
height:400px;
width:400px;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#top img:hover {
opacity:0;
}
#text{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
This is what I've got so far. But I'd need to display the Hello world only when bottom image is displayed.. As well if I'd have some button there, to make it react only in those situations.
http://jsfiddle.net/L7XCD/733/
The easiest way if you just want clickable elements on the bottom element, would be to just switch the top and bottom layer. So you make your top layer (including button and text) transparent and lay it over the visible image.
On hover you just blend it in.
If you do it the other way around the top image is blocking the clickevents.
I put a little example together here:
http://jsfiddle.net/L7XCD/732/
HTML:
<div class="container">
<div class="cat-image bottom">
<img class="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
<div class="cat-image top" >
<img class="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
<p class="text">
Hello World!
</p>
<button>Click meow!</button>
</div>
CSS:
.top {
position: relative;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.top:hover {
opacity: 1;
}
.bottom {
position: absolute;
top: 0;
}
#top {
z-index: 10;
position: relative;
}
#bottom #text {
z-index: 1;
}
That should do the trick.
I have an image, on hover i will animate it to fade out to opacity: 0.4;, the fading out is fading to white, but i liked to fade to black, so i found a solution is to change the background color of the body to black. Then my fadeout will be towards black. So the plan i'm trying to do is create a div with black background to have the same width and height as my img but i don't know how to do it.
HTML
<div class="container">
<div class="img_section ">
<img class="eight columns test_img" src="images/wpdevshed-portfolio.jpg" alt="logo">
<h2 class="caption">Jack<br />Portfolio1</h2>
</div>
</div>
The width and height of my image is 500 by 500. So basically i want a black bg to be behind this image, so when i fadeout it will be towards black.. Anyone know of any simple ways that i can achieve it instead of using body{background-color:black};?
You can acheive this by giving background to parent div. Below is the simple code that helps you.
FIDDLE: http://jsfiddle.net/kiranvarthi/ar387hav/
CSS:
.container {
background: #000;
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.container img:hover {
opacity:0;
}
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.
i have a problem using css3 transitions
how can i make the transition smooth it appears instantly
i want the div box to slowly change its height when i hover over it
the html code
<div id="imgs">
<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />
</div>
jsfiddle
I believe you need to set a specified height instead of auto. http://jsfiddle.net/BN4Ny/ this does a smooth expansion. Not sure if you wanted that little close open effect though. I just forked your jsfiddle and added a specified height.
This solution does not need javascript or have the problem of needing to have a fixed height for the container before hand.
This is made possible by using max-height property and setting its value to a high value.
#imgs {
border:1px solid #000;
border-radius:3px;
max-height:20px;
width:100%;
overflow:hidden;
transition: 2s ease;
}
#imgs:hover {
max-height:15em;
}
<div id="imgs">
<img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>
Instead of using a set height on a container or using JS (which are both awkward solutions)... You can put the images in list items and work your transition on the li.
If all the images are going to a similar height it means your content inside the container can still be dynamic. For example...
/*
CLOSED
*/
div.container li
{ height:0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
/*
OPEN
*/
div.container:hover li
{ height:30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
Here's how you can do it: http://jsfiddle.net/minitech/hTzt4/
To keep a flexible height, JavaScript is a necessity, unfortunately.
well I'm using this method:
use max height to transition height instead of the height directly...
for example:
div {
height: auto;
max-height:0;
}
.toggle-above-div:hover div {
max-height:0;
}