I'm in front of a problem that I don't succeed to resolve from couple of hours.
I have two lines of "buttons", and when you hover a button a text need to be displayed ( full width ) under the line where was the button.
My problem is that, this part is ok, but when the text is displayed he is hiding the next line of "buttons", I would like for this line to be "pushed" by the hover animation that display the text under the first line.
Can someone help me to do that and to explain to me why it's not working actually ? I think the absolute tag on the CSS is ruining my plan.
body {
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.column1 {
width: 100%;
}
.column2 {
width: 100%;
}
div{
float:left;
}
.accordion {
display: inline-block;
text-align: left;
margin: 1%;
width: 20%;
}
.accordion:hover .accordion-content {
max-height: 300px;
}
.accordion-content {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
position:absolute;
left:0;
}
.accordion-inner {
padding: 0 15px;
}
.accordion-toggle {
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #ffffff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: centre;
text-decoration: none;
}
.accordion-toggle:hover {
background: #00727d;
}
<div class="column1">
<div class="accordion">
<a class="accordion-toggle">Hover 1</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div class="accordion">
<a class="accordion-toggle">Hover 2</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div class="accordion">
<a class="accordion-toggle">Hover 3</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
</div>
<div class="column2">
<div class="accordion">
<a class="accordion-toggle">Hover 4</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div class="accordion">
<a class="accordion-toggle">Hover 5</a>
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div class="accordion">
Hover 6
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
</div>
The simplest solution is that you have to move divs outside .accordion. Like that.
body {
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.column1 {
width: 100%;
}
.column2 {
width: 100%;
}
div{
float:left;
}
.accordion-style {
display: inline-block;
text-align: left;
margin: 1%;
width: 22%;
}
.accordion1:hover ~ .accordion-content1, .accordion2:hover ~ .accordion-content2, .accordion3:hover ~ .accordion-content3, .accordion4:hover ~ .accordion-content4, .accordion5:hover ~ .accordion-content5, .accordion6:hover ~ .accordion-content6 {
max-height: 300px;
}
.accordion-content-style {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
left:0;
}
.accordion-inner {
padding: 0 15px;
}
.accordion-toggle {
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #ffffff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: centre;
text-decoration: none;
}
.accordion-toggle:hover {
background: #00727d;
}
<div class="column1">
<div class="accordion1 accordion-style">
<a class="accordion-toggle">Hover 1</a>
</div>
<div class="accordion2 accordion-style">
<a class="accordion-toggle">Hover 2</a>
</div>
<div class="accordion3 accordion-style">
<a class="accordion-toggle">Hover 3</a>
</div>
<div class="accordion-content1 accordion-content-style">
<div class="accordion-inner1">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div class="accordion-content2 accordion-content-style">
<div class="accordion-inner2">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div class="accordion-content3 accordion-content-style">
<div class="accordion-inner3">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div class="column2">
<div class="accordion4 accordion-style">
<a class="accordion-toggle">Hover 4</a>
</div>
<div class="accordion5 accordion-style">
<a class="accordion-toggle">Hover 5</a>
</div>
<div class="accordion6 accordion-style">
Hover 6
</div>
<div class="accordion-content4 accordion-content-style">
<div class="accordion-inner4">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div class="accordion-content5 accordion-content-style">
<div class="accordion-inner5">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div class="accordion-content6 accordion-content-style">
<div class="accordion-inner6">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
Try changing this block. The position:relative will make the div actually be between the two lines of buttons. Then, set the width that u want that text to be. You can't use 100%, but, if as you said you want to get it full width, try using 100vw, which is equivalent to the full viewport width value.
Replace with this and it should work as intended:
.accordion-content {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
position:absolute;
left:0;
}
You could remove position: absolute; from .accordion-content and add
display: flex; to .column1 and .column2
Now, I don't know if it'll be a problem to you, but the limitation of this solution is that it will contain the text that appear under to the size of your buttons.
Hope that fixes your problem
Related
When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears.
THE PROBLEM
If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help.
I need to remove all hover effects on my #image-divs
HTML
<div id="box">
<div id="icons1">
<div id="image1"></div>
</div>
<div id="icons2">
<div id="image2"></div>
</div>
<div id="icons3">
<div id="image3"></div>
</div>
<div id="icons4">
<div id="image4"></div>
</div>
</div>
CSS EXAMPLE
#box #icons1 #billede1 {
height: 450px;
width: 1000px;
margin-left: -186%;
margin-top: 150px;
background-image: url(../html_css/billeder/1.jpeg);
background-position: center;
background-size: cover;
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
Use pointer-events:none
div{pointer-events:none}
div:hover{color:red;}
<div>Hover over me</div>
best way is to use pointer-events:none;
#image-divs{
pointer-events:none;
}
Notice that you to specify every hover for every div while you are using id's, you need to specify the hover effect for every div, now you should use this :
#image1{
display:none;
}
#icons1:hover #image1
display:block;
}
this means, whenever you hover the icon1, image1 will be displayed, and so.
you can also try the opactiy:0; and opacity:1;
Hello I would like to transition only my css transform and nothing else. It hard to explain through text so check out my code below:
HTML:
<section class="success">
<ul>
<li>
<div class="circle-spin-wrapper">
<img src="ellipse_sm_blue.png" >
</div>
</li>
</ul>
</section>
CSS:
.circle-spin-wrapper {
transition: all 1s ease;
}
.success li:hover .circle-spin-wrapper {
transform:scale(1.25);
position: relative;
top: 95px;
}
As you can see, I have a div and when you hover over it, it scales by 1.25. It also moves down 95 px by, top: 95px;
The transition works, but it transitions both the scale(1.25) as well as the top: 95px.
I would like to make it so the transition (transition: all 1s ease;) only works on the transform:scale(1.25) and not the top: 95px.
I know it has something to do with the "all" keyword in the transition css, but I dont know what to replace it with to only target the transform.
I tried replacing "all" with "transform" and "scale" and it didn't work.
Does anyone have any suggestions?
Thanks!
I tried replacing "all" with "transform" and "scale" and it didn't work.
Replacing "all" with "transform" is exactly what you should be doing - that will result in the transition applying only to the transform property. It's tough to debug why it isn't working without seeing the rest of the code - can you set up a quick CodePen?
.circle-spin-wrapper {
transition: transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
}
.success li:hover .circle-spin-wrapper {
transform: scale(1.25);
position: relative;
top: 95px;
}
<section class="success">
<ul>
<li>
<div class="circle-spin-wrapper">
<img src="test.jpg">
</div>
</li>
</ul>
</section>
this should work. note: "-webkit-transition: -webkit-transform 1s ease;" is for safari
.circle-spin-wrapper {
transition: transform 1s ease;
}
But it looks buggy since .circle-spin-wrapper has no width set, so it's the full width of the page, which means .circle-spin-wrapper becomes 125% of the width of the page and the image inside moves out of the page.
Solution? Set a width on .circle-spin-wrapper.
As you said, instead of all in your transition use transform. It is working actually!
Maybe its the vendor prefixes that you are missing. Try adding that too.
.circle-spin-wrapper {
transition: transform 1s ease;
}
.success li:hover .circle-spin-wrapper {
transform:scale(1.25);
position: relative;
top: 95px;
}
<section class="success">
<ul>
<li>
<div class="circle-spin-wrapper">
<img src="http://placehold.it/50x50" >
</div>
</li>
</ul>
</section>
I'm searching a way to make an css effect but with exception of not applying the effect to the letters and the buttons (Only to the image), so I need create a rule in css. I can't change the order of the things.
With my code, I get something like this.
This is my code, like you can see I applied some effect in css and this is getting applied to all. I only need it for the image.
.myimage01 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" data-style="background-image: url(http:www.myurl.com/image.jpg);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
When I apply the effect apply the effect to the letters (h5, h3, p and the button with btn class)
I don't want the effect for them, only for the background-image.
How can I do?
for transition backgrounds use the property background-size, and use background-position to adjust as fits you better
body {
margin: 0
}
.myimage01 {
background-size: 100%;
background-position:center center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
background-image: url(http://lorempixel.com/1600/900);
padding: 40px 30px;
color: #ffffff;
text-align: center;
}
.myimage01:hover {
background-size: 130%;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
Use background-size for transition:
div {
background-image: url(http://lorempixel.com/400/200/sports/1/);
background-size: 100%;
background-repeat:no-repeat;
background-position:50% 50%;
width:400px;
height:200px;
transition: background-size 200ms linear;
text-align:center;
line-height:200px;
}
div:hover {
background-size: 120%;
}
<div>
Some text
</div>
try to transform the background-size property instead of scaling the whole container.
You can apply transform on background-size, background-position to get the effect on the background image.
.myimage01 {
background-size:100%;
background-position:0px 0px;
-webkit-transform: all;
transform: all;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
background-size:140%;
background-position:-50px -50px;
-webkit-transform: all;
transform: all;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" style="background-image: url(http://dummyimage.com/600x200/000/fff);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
How would I go about hovering over an image that then blurs the background image behind it within css? The way I have it set up now is the background image blurs upon hover.
Here's my css:
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}
.wrapper{
width:900x;
height: 100px;
position: absolute;
top: 2400px;
z-index: 50;
}
.logo{
postion: absolute;
margin: 0 auto;
top: 2420px;
z-index: 50;
left: 400px;
}
html:
<div class="blur"><img src="/homepic1.jpg"></div>//This is the image I want blurred
<div class="wrapper">
<div class="row">
<div class="span12 pagination-centered">
<img src="/transparanetsnu.png">//How do I hover over any of these images to trigger a blur on "homepic1.jpg"
</div>
<div class="span4 offset3">
<div class="box2"><img src="/greek_logo.gif"></div>
</div>
<div class="logo"><img src="/UM-Main-Logo-Maroon.gif">
</div>
I think the best way is to use JQuery. All images and add a class like 'blur' to them everytime user hover over one image, but you should remove the class from the one you don't want.
$('.img1').mouseover(function(){
$('img').addClass('blur');
$('.img1').removeClass('blur');
});
Add the effect using css or javascript.
Use jQuery for that purpose.
First of all dowload jQuery from: http://code.jquery.com/jquery-1.10.2.min.js
Then.
$('.yourImage').mouseover(function(){ //'.yourImage' are the last three images in your case.
$('.homepic1').addClass('blur'); //'.homepic1' is the class of first image in your case
});
.addClass('blur') , Will add the class 'blur' from your CSS to that '.homepic1' element, As soon as your mouse hovers over ANY of the three images.
Heres where I'm at:
http://codepen.io/qdarkness/pen/FyIJh
Ideally, how I imagine it at least, is when a user hovers over the <a> that the <div>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.
I'm suspecting the fact that I have the <img> inside the <div> that it is not working properly, but I am using that div to constrain the img width and height.
I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <div>?
HTML:
<li class="b c d">
<a href="" class="link">
<div class="img-holder overlay"><img src="img/test.jpg"></div>
<div class="tag overlay">
<h3>test</h3>
<h4>test</h4>
</div>
</a>
</li>
CSS:
.img-holder {
width: 235px;
height: 195px;
overflow: hidden;
}
.tag {
clear:both;
position:relative;
float:left;
width: 100%;
overflow:hidden;
background-color: #FFF;
text-align: center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
a:hover .overlay {
background: #909090;
z-index: 301;
}
OK, I THINK I have an understanding of what you want to do...
I've forked your Codepen sketch: http://cdpn.io/uzfrk
Main points are to position the overlay absolute over your image (relative to .link), and then transition opacity to have it appear.
<old example removed>
UPDATED: fresh sketch with cleaned up markup and styling. Simple example for your purposes.
Codepen sketch here: http://cdpn.io/zhBcA
The main point is the direct child selector to target elements related to your container.
figure:hover > figcaption {
background: #ccc;
}
figure:hover > .overlay {
opacity: 0.85;
}
Let me know if this is what you are looking for.
Could this be what you want? It's just a simple approach.
UPDATE:
Covering text area now.
http://codepen.io/anon/pen/tlKCJ