I am working on webpage where I want to use background image on hover effect, however I have some issue. Image is display on hover with tranisiton but when I move back my mouse then transition is not working and it is not looking good - there is no hover out effect, I hope it is clear. I would like to also use scall effect for hover but I don't have additional wrapar as content is generated by additional module in joomla.
I tried also implement solution with opacity but then I am loosing my border as I don't have additional wrapper.
So far this is my code on website test3.reksio.net
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in;
background-position: center;
background-size: cover;
}
Is this what you want to achieve?
div{
width: 500px;
height: 500px;
}
div:before{
content:'';
transition: all 0.7s;
position: absolute;
width: 500px;
height: 500px;
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
background-position: center;
background-size: cover;
opacity: 1;
}
div:hover:before{
opacity: 0;
}
div:hover span{
opacity: 1;
}
<div>
<span>1111</span>
</div>
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in-out;
background-position: center;
background-size: cover;
}
In order to make the transition appear both upon hovering and leaving the element, apply said transition to the element itself; for example, using your css rules in the question it would look like this:
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
transition: all 0.7s ease-in;
}
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
background-position: center;
background-size: cover;
}
I never tried animating a background image like this. Since the background image is loaded only on hover, the first time there will be a delay (if it's not loaded somewhere else on the page). I would advise you to load the image in the normal style, and "hide" it with background-position or background-size i.e.
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
transition: background-size 0.7s ease-in;
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
background-size: 0 0;
}
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-size: cover;
}
Related
So, I was trying to get an image to, when hovered over, spin 360 degrees and scale up by 1.4, all with its centre staying in place. I tried this:
.logo img[data-v-4fbac4e1] {
width: 50px;
height: 50px;
content: url(https://i.imgur.com/txz1IXI.png);
transition: width 2.0s, height 2.0s, transform 2.0s;
}
with this:
.logo img[data-v-4fbac4e1]:hover{
width: 65px;
height: 65px;
transform: rotate(360deg);
}
and it works fine, but it moves off-centre as it expands. How do I make sure the width and height increase from the centre so it stays in the same place? Sorry if this seems elementary, I'm new to CSS.
Edit: the part of the HTML I'm using looks like this:
<a data-v-4fbac4e1 href="/home" class="logo">
<img data-v-4fbac4e1 src="/img/icons/icon.svg">
</a>
If more is required I can add it, but this is the HTML for the image I'm trying to transform.
Since I'm not entirely sure what you mean, point to which is your culprit and we'll get you sorted out but here's some examples of the differences between techniques.
img, div {
display: inline-block;
margin: 1rem;
height: 10rem;
width: 10rem;
}
.fancy-img1, .fancy-img3 {
object-fit: cover;
outline: red 2px solid;
}
.fancy-img2, .fancy-img4 {
background: url(https://picsum.photos/200) no-repeat center center / cover;
outline: blue 2px solid;
}
/* grow by height value change transition */
.fancy-img1 {
transition: transform .5s, height .5s;
}
.fancy-img2 {
transition: transform .5s, height .5s;
}
.fancy-img1:hover, .fancy-img2:hover {
transform: rotate(360deg);
height: 15rem;
}
/* Scale with transition */
.fancy-img3 {
transition: transform .5s;
}
.fancy-img3:hover {
transform: scaleY(1.5) rotate(360deg);
}
/* Scale with keyframes */
#keyframes spinGrow {
to { transform: scaleY(1.5) rotate(360deg); }
}
.fancy-img4:hover {
animation: spinGrow .5s forwards;
}
<h2>Are you talking about transition height which cause the jumpy effect?</h2>
<img class="fancy-img1" src="https://picsum.photos/200">
<div class="fancy-img2"></div>
<h2>Or actually scale so it remains in its original position?</h2>
<img class="fancy-img3" src="https://picsum.photos/200">
<div class="fancy-img4"></div>
I have a problem, I need to add a logo to the image. The logo should show up only on hover. Currently, I have this class that is reacting by darkening on hovering:
.et_pb_video_overlay_hover {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
But when I add there content:url(...) it will show up in the class straight away.
I tried to do
.et_pb_video_overlay :hover{
content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
}
But then it doesn't inherit the fading in and out beside the size is all over the image and I would need it to be smaller and in the center.
Is there any way, that I can move just around the content property to make it easy in and out and scale it down without messing up the previous property?
You can move it on :before
like this:
.content:hover:before {
content: "";
background-image: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
width: 100px;
height: 100px;
}
Enjoy!
https://codesandbox.io/s/hover-logo-image-show-jtrh4
Set content empty by default in this class .et_pb_video_overlay
.et_pb_video_overlay{
content: '';
}
and then on hover
.et_pb_video_overlay:hover{
content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
}
It will work and also you both classes are different .et_pb_video_overlayand .et_pb_video_overlay_hover
I want to keep the star yellow when I click on it and deselected the color when I re-clicked.
I try to use the :active option.
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<div class="fave"></div>
your can try this by using checkbox if you want to do it with NO js only css
[type="checkbox"]{
display:none;
}
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
display: inline-block;
}
[type="checkbox"]:checked ~ .fave {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<input type="checkbox" id="cb1">
<label class="fave" for="cb1"></label>
:active means while the mouse button (or key) is held down.
It is not a toggle state.
CSS has no mechanism for adding a toggle state.
For that you'll need a checkbox (which you can combine with the :checked pseudo-class) and/or JavaScript (the specifics depending on the semantics you are trying to express).
i think you want something like this
jQuery(document).ready(function() {
jQuery(".fave").click(function() {
jQuery(this).toggleClass("active");
})
})
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover,
.fave.active {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fave"></div>
I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#techbutton {
display: block;
width: 125px;
height: 125px;
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
position: absolute;
top: -999em;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?
You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#techbutton {
display: block;
background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922');
background-size: 100%,100%;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
#techbutton:hover {
transform: scale(0.9,0.9);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}
Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?
Not sure if you need any code but here's my css for the img tag:
img {
width: 600px;
height: 342px;
border-radius: 1px;
}
You can do it with
HTML
<div id="yourImage" ></div>
CSS
#yourImage {
background-image: url('image1.jpg');
}
#yourImage:hover {
background-image: url('overimage.jpg'), url('image1.jpg');
}
There is a jquery plugin for this.
The first effect is what you're looking for.
You can try this. I think it uses only CSS.
You need to check the CSS position attribute, so you can have both elements on the same place.
And then just chang the opacity of the hover image.
#Mateusz has the best answer, but I would improve upon that by adding the css transition something along the lines of this:
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
Try this:
HTML:
<div class="your-img">
<div class="your-hover"></div>
</div>
CSS:
.your-img {
width: 300px; /* your image width and height here */
height: 225px;
background-image: url('../img/image_01.png');
}
.your-hover {
width: 300px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
filter: alpha is for IE, I hope it helps.