I have such dom structure:
<div class="wrapper">
<div class="style1"> ... another divs ... </div>
</div>
<div class="wrapper">
<div class="style2"> ... another divs ... </div>
</div>
<div class="wrapper">
<div class="style1"> ... another divs ... </div>
</div>
<div class="wrapper">
<div class="style2"> ... another divs ... </div>
</div>
<div class="wrapper">
<div class="style1"> ... another divs ... </div>
</div>
In style1 and style2 there is background-color settings for all inner divs (marked as 'another divs').
Now I want to make background transation for all divs inside style1 and style2:
.wrapper :hover
{
background-color: #ccc;
}
.wrapper
{
-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
It doesn't work (nothing changes). When I set hover propery for style1 and style2 it changes background, but only active dive the mouse is over.
Remove the space between .wrapper and :hover. But I may have mis-read this. You might want to do .wrapper:hover .style1 div{}
If I understand you right you want to show/mark every div that has certain style. So upon hovering single div.style1 you want to mark all style1 divs. I don't know how to achieve this only with css buth with a little jquery/javascript help I got something like this:
CHANGED CSS
.wrapper_hover
{
background-color: #ccc;
}
.wrapper
{
-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
JQUERY CODE
$("div").hover(
function () {
$(".style1").addClass("wrapper_hover");
},
function () {
$(".style1").removeClass("wrapper_hover");
}
);
Related
I have some code like this
<div ng-click="showMore = true">show more</div>
<div class="show-more' ng-show="showMore">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
<div ng-click="showMore = false">show less</div>
</div>
and when user clicks 'show more', I want to show the rest in animation
in my css
.cell {
padding-top: 20px;
padding-bottom: 15px;
height: 110px;
}
I have to get rid of ng-show or ng-hide, because display:block or display:none would not make transition: height 0.5s linear; work. So I tried to set the height of .cell to be 0 when it is collapsed, and set it as 110px when it is expanded, but cell height is not really 0 when it is collapsed, because it contains <span> or <div> which have height and padding
how to animate the expand/collapse process in my case? thanks in advance
var app = angular.module("myApp", []);
// Create a Controller named "myCtrl"
app.controller("myCtrl", function($scope) {
showMore = false;
});
.show-more {
-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;
}
.show-more.show {
max-height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="show-more" ng-class="{'show': showMore}">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
</div>
<button type="button" ng-click="showMore = !showMore">
Show {{ showMore ? 'Less' : 'More' }} ...
</button>
</div>
Why you trying this in scripting way? Why don't you use Bootstrap Collapse class, Its all going to come with inbuilt Animations
for my site I have finally created a load more option, with a clickable image that when clicked loads the next posts.
However, I want to add an effect to the image so when one hovers over the "plus" spins. Since the link area is above the image the "plus" no longer spins.
Any thoughts on how to resolve this without potentially breaking the plugin, behind this load more function in wordpress ?
a.load_more { border-radius: 70%; height:26%; width:15%; position: absolute; top:3%; left:1.5%; display:block; background:rgba(0,255,0,0.5);}
img.plus{
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
z-index:999
}
img.plus:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<div id="content">
<div id="block">
<div>
<img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
</div>
</div>
</div><!--/content-->
fiddle
you can put the link around the image so the image is the link you dont even need a class for the href then.
example:
<div id="content">
<div id="block">
<div>
<a href="#" class="load_more">
<img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
</a>
</div>
</div>
</div><!--/content-->
I hope that i have understand you're question correct and that this will help you.
try to add "visibility: hidden"
.load_more {
border-radius: 70%;
height:29%;
width:11%;
position: absolute;
top:3%; left:1.2%;
display:block;
background:rgba(0,255,0,0.5);
visibility: hidden;
}
Just change your markup into like this. Wrap the image by anchor.
img.plus{
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
z-index:999
}
img.plus:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<div id="content">
<div id="block">
<div>
<img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
</div>
</div>
</div><!--/content-->
Hope it helps. Cheers
I was wondering if I can tranform an object A when I´m hovering a sibling B (only with CSS if possible). This is my code:
<div id="block-1">
<a href="whatever.hml">
<img class="imgZoom" src="image.jpg" height="300">
<div style="height: 86px;" class="caption"> </div>
<div class="caption-text">
<h3>Header</h3>
<h4>subheader</h4>
</div>
</a>
</div>
.imgZoom is just this:
.imgZoom {
-webkit-transition: all 0.4s ease; /* Safari and Chrome */
-moz-transition: all 0.4s ease; /* Firefox */
-ms-transition: all 0.4s ease; /* IE 9 */
-o-transition: all 0.4s ease; /* Opera */
transition: all 0.4s ease;
}
I want to hover .caption-text and apply a transform to imgZoom (scale), I guess this is absolutely possible but well, I´m not being able to do it. Can anyone help me or at least tell me if is possible? Thanks.
you can do this as was mentioned in comments .caption-text:hover + .imgZoom {}
but you have to move img right ater element you want to hover
<div id="block-1">
<a href="whatever.hml">
<div style="height: 86px;" class="caption"> </div>
<div class="caption-text">
<h3>Header</h3>
<h4>subheader</h4>
</div>
<img class="imgZoom" src="image.jpg" height="300">
</a>
</div>
if you need element in order you stated, you need use javascript
Is it possible to make each separate background image of these hexagons cross-fade into another picture (Example: http://css3.bradshawenterprises.com/cfimg/).
I'm relatively new to CSS and I feel this is out of my reach so I have come here to ask the great community at Stackoverflow for help.
http://jsfiddle.net/kGSCA/128/
<div class="container">
<div class="hex" style="background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);">
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);">
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
Thankyou!
John
Just remove your background image from the inline style and put it in the CSS.
.hex {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);
}
.hex:hover {
background-image: url(http://placekitten.com/450/300);
}
your html remains this way:
<div class="hex">
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
See the resulting
fiddle
Of course, if you want different images, you will need to set an id to the elements, and assign the images accordingly
I want to change the opacity on mouseover for each image separately using a CSS3 transition.
Here's the code:
<div id="gallary">
<img src="images/1.jpg"/>
<img src="images/1.jpg"/>
<img src="images/1.jpg"/>
<img src="images/1.jpg"/>
<img src="images/1.jpg"/>
<img src="images/1.jpg"/>
<img src="images/1.jpg"/>
</div>
and here's the CSS:
#gallary img{
opacity:1;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in;
}
#gallary:hover img{
opacity:.5;
}
The selector occurs for all images inside a div with the id "gallary". How can I make the opacity change for each image separately on mouseover?
Here's a sample: http://jsfiddle.net/TJeHX/
#gallary:hover img {
->
#gallary img:hover {
You current definition changes opacity of whole "gallary" container and therefore, for all images.