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
Related
I am building a portfolio site and I want each project's div to have a color change on hover. I've coded it so the background color and text slowly changes when the mouse hovers over the div. However, when the mouse moves away it abruptly changes color back. I would like it to fade back to the original color slowly (rather than abruptly), using CSS if possible.
HTML:
<div class="hacker col-xl-6 col-md-6 mb-4">
<a href="http://text.com/filler/">
<div class="card card-body border-0 shadow">
<img src="img/filler.png" class="card-img-top" alt="Filler">
<div class="card-body text-center">
<h5 class="title1 mb-0">Filler</h5>
<div class="subtitle ">Web Design</div>
</div>
</div>
</a>
</div>
CSS:
.card:hover{
background-color: #12455a;
color: ##fff;
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
.card:hover .title1 {
color: #fff !important;
-webkit-transition: background-color .3s;
transition: background-color .3s; }
.card:hover .subtitle {
color: #fff !important;
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
I expect that when the mouse moves away from the element, the colors will fade back to their original state with the same transition timing as when they fade in, but currently the color changes back abruptly.
You want to apply the transition to .card directly, not the :hover:
.card {
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
.card:hover {
background-color: #12455a;
color: #fff;
}
<div class="hacker col-xl-6 col-md-6 mb-4">
<a href="http://text.com/filler/">
<div class="card card-body border-0 shadow">
<img src="img/filler.png" class="card-img-top" alt="Filler">
<div class="card-body text-center">
<h5 class="title1 mb-0">Filler</h5>
<div class="subtitle ">Web Design</div>
</div>
</div>
</a>
</div>
Also note that you only need to apply it to .card itself, and not the child elements.
As an aside, you don't need to set your color on the child elements, as it will cascade down from the parent .card:hover (though you have a syntax error preventing this from happening in your above code -- I've fixed this up in my example).
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
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");
}
);