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
Related
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 am using wordpress with woocommerce to create eshop. Woocommerce has part called mini-cart.php it is actual cart of customer. However I need this cart to be max 60% of height of whole site and I need content of cart to be scrollable. This would be easy but the second thing I need is to exclude buttons and total from scrolling. I have tried many ways but it never works. Here is code I use:
<div class="cart active">
<div class="cart-wrapper">
<h1 class="widget-title"> </h1><div class="widget_shopping_cart_content"><div class="cart-product-list">
<ul class="cart_list product_list_widget ">
<li><a href="http://autoflex.zone42.sk/obchod/2x-stabilizator-predna-naprava-porsche-911-od-09-1997/">
<img src="http://autoflex.zone42.sk/wp-content/uploads/2013/10/2x-stabilizátor-predná-náprava-Porsche-Boxster-od-09.1996-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2x stabilizátor predná náprava Porsche 911 od: 09.1997" height="90" width="90">
2x stabilizátor predná náprava Porsche 911 od: 09.1997
</a>
<p class="quantity">1 × <span class="amount">50,90€</span></p>
</li>
</ul>
</div><!-- end product list -->
<p class="total"><strong>Medzisúčet:</strong> <span class="amount">50,90€</span></p>
<div class="buttons">
<a href="http://autoflex.zone42.sk/kosik/" class="button">
<div class="cart-buttons">
<div class="cart-buttons-padding">
Zobraziť košík → </div>
</div>
</a>
<a href="http://autoflex.zone42.sk/pokladna/" class="button checkout">
<div class="cart-buttons">
<div class="cart-buttons-padding">
pokladňa → </div>
</div>
</a>
</div>
</div>
and here is CSS:
.cart.active{
max-height: 60%;
margin-bottom: -25px;
transition: max-height .5s .2s;
-ms-transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
}
div.facebook:hover, div.mail-us:hover, div.move-up:hover, div.cart-total.hoverOn:hover{
right: 150px;
}
div.cart-total.hoverOn{
transition: all .5s, width .5s .5s;
}
div.cart-total.hoverOff{
transition: all .5s, width .2s;
right: 150px;
width: 279px;
}
.cart-product-list{
overflow-y: auto;
}
so what should I do if I want only ul (cart_list) scrollable? and I also want the whole div name cart active to be max 60% height of whole site? Thanks in forward
ul.cart_list {
overflow: scroll;
}
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.
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");
}
);