This is an example of the page: link
My problem here is that the images rendering changes to be like "image-rendering: pixelated;" while the image is resized (when you hover some image), and when the resize over it changes back to normal.
(You can see this very clear when you hover Youtube for example)
I don't want it to be pixelated, and want the image rendering to be normal through all the mouse-hover.
This is my HTML (Made with React):
<li className="original-icon-li">
<a href={props.hrefProp}>
<img src={"/images/classicLogos/" + props.imageUrl} alt={props.imageUrl} />
</a>
</li>
And the CSS:
.original-icon-li {
margin: 10px;
display: inline-block;
transition: all .5s;
}
.original-icon-li a {
padding: 5px;
display: inline-block;
border: none;
transition: all .5s;
}
.original-icon-li a img {
width: 90px;
height: 90px;
display: block;
transition: all .5s;
}
.original-icon-li a:hover img {
transform: scale(0.88);
}
What do you think is the problem ?
Related
I am a beginner. I am working on this webpage
salesletter. I am trying to change the button color of the add-to-cart buttons by changing their image on mouseover. I am unable to do so with though with my limited knowledge and google isn't able to help me this time. I'd like to ask for your help on how I am going to be able to do this. I tried some codes that I found on google but they dont work. I have no knowledge of JS btw. Thanks!
Update: thanks for the help of Jan Kees, I was able to accomplish the goal however, there is a problem. here is my current code:
.add-2-cart {
max-width: 60%;
margin-left: auto;
margin-right: auto;
padding-left: 0%;
padding-right: 0%;
transition: .5s ease;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
.add-2-cart:hover {
transform: scale(1.1);
}
<div class="add-2-cart col-flex-fullwidth">
<a href="https://www.digistore24.com/product/394232" target="_blank">
<img src='images/a2c-1btl-am.png' onmouseover="this.src='images/a2c-1btl-amh.png'" onmouseout="this.src='images/a2c-1btl-am.png'" class="fluid-img">
</a>
</div>
Now the problem is the image change does not immediately take effect. I need to hover multiple times on the image before it actually works properly.
That's using the adjacent sibling combinator (+).
.image {
height: 100px;
}
.btn {
padding: 10px;
background: orange;
width: 50px;
}
.image:hover+.btn {
background: red;
}
<img class="image" src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg">
<div class="btn">button</div>
</img>
OR
if the whole card is an image you can change the content in the css.
img {
height: 150px;
}
img:hover {
content: url("https://tryslimleaf.com/d24/images/a2c-6btl-amh.png");
transform: scale(1.1);
}
<img src="https://tryslimleaf.com/d24/images/a2c-6btl-am.png">
This is an intermittent issue that we're encountering on our site where select SVG files are 0x0. I did some little investigation and I noticed that the figure tag that I turned into display: inline-block is causing this, when I changed this to display: block the image starts appearing. Can anyone explain me why is that? and why is it only applicable to certain SVG files.
Here's a sample code (I'm using tailwindCSS btw):
<div class="image-component">
<figure class="relative mb-5">
<div class="js-lightbox">
<img src="sample.svg" class="js-zoomable">
</div>
</figure>
</div>
.relative {
position: relative;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.image-component figure {
display: inline-block;
}
.js-lightbox {
cursor: pointer;
}
.js-zoomable {
cursor: pointer;
transition: transform .5s;
}
img, video {
max-width: 100%;
height: auto;
}
As the title suggests. When I click on something, a class gets added to it with a border on the bottom. I just want that to fade in (and out if possible). I'm not sure if I need to do this with JS or if it can be done with CSS.
So far here's what I've tried - at least with CSS.
.selector {
width: auto;
height: 30%;
width: auto;
height: 50%;
margin-right: 5%;
}
/*TOGGLE CLASS*/
.active {
border-bottom: 1px #a0a0a0 solid;
transition: border-bottom 0.5s ease-in-out;
padding-bottom: 15px;
}
<span class="selector"
><a href="javascript:void(0)" onclick="quote(0)"
><img
src="..."
alt=""/></a
></span>
You can use the [transtion][1] property in CSS to set the transition-time (and other cool things).
In your case you can for example add a class. We can name it .transition-3s. Then in your CSS file you can declare this class as follows:
.transition-3s {
transition: 3s;
}
EDIT
Do not apply this on your .active class, as this will result in it only using transition when "deactivating" the toggle.
You can use inputs to do it. In this case, the best practice is to use a "checkbox" type and with the subclass of ":checked" you can use it like an added class, here you have the example of how it would look in your code:
#toggle {
display: none; //To hide it
}
#toggle:checked ~ span img { //select the element to toggle
//As you see, when you press the lable, this is triggered
border-bottom: 1px #a0a0a0 solid;
transition: border-bottom 0.5s ease-in-out;
padding-bottom: 15px;
}
.selector {
width: auto;
height: 30%;
width: auto;
height: 50%;
margin-right: 5%;
}
<input id="toggle" type="checkbox">
<label for="toggle">This is the text that will toggle the "class"</label>
<span class="selector">
<img src="..." alt="">
</span>
You can use the span as a label, just mess around with it.
And for animate it, just use the attribute transition to make it smooth:
#toggle:checked ~ span .active {
border-bottom: 1px #a0a0a0 solid;
padding-bottom: 15px;
//not in here
}
.active { //or img
transition: border-bottom 500ms ease-in-out; //use it here to make it more clear
}
Hope it helped, ask for any doubt.
For a web project, I would like to create an animated logo in the top left corner of a website. The logo should animate when the visitor is hovering over it, i.e. when not hovering, the logo should display the abbreviated version of the website's name and on hovering it should animate into the fully spelt out version of the name. Here's a quick demo was done in After Effects which shows what I would like to achieve:
The only time I have ever seen something like this was on this website http://ourplace.studio/, the site of a design studio called 'Our Place', in the top left corner. The logo animated pretty much the same way when hovering over it. But looking into the website's source I could not figure out how it is done. The logo is inside a <div> with an <a> tag which has been assigned a class called animation-link. That is as far as I got.
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animaition-link">
<span>Our</span> <span>Place</span>
</a>
</div>
It would be fantastic if someone could help me to figure this out. It would be a good learning experience to understand how something like this is done.
You can achieve this using css3 transitions:
transition: width 1s;
I made a fiddle that solves your task: https://jsfiddle.net/jmxLrq4m/
Note that this won't work with dynamic width (width: auto) as the transition needs a fixed start- and end value to animate through. Therefor I gave each span a class and set fixed widths on default and on hovering.
The transition attribute combines all transition-properties, which you could also separate e. g.
transition: width;
transition-duration: 1s;
...
See here for more information about transitions: https://www.w3schools.com/css/css3_transitions.asp
i have made a fiddle for you, i hope that works for you
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animsition-link">
<span>O<i>ur </i></span><span>P<i>lace</i></span>
</a>
</div>
div#logo a {
font-size: 40px;
color: #333;
text-decoration: none;
}
div#logo span {
transition: all .3s;
overflow: hidden;
display: inline-block;
float: left;
}
div#logo i{
font-style: normal;
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
transition: all 1s;
}
div#logo:hover i {
max-width: 200px;
}
Hi please check this demo here
https://jsfiddle.net/JentiDabhi/83auj9v8/
HTML:
<div id="logo">
<a href="#" class="animsition-link">
<span>Demo</span><span>Logo</span>
</a>
</div>
CSS:
#logo {
width:210px;
font-size: 40px;
}
#logo span {
display: inline-block;
float: left;
margin-right: 0;
overflow: hidden;
}
#logo span {
transition: all 1s ease 0s;
}
#logo span:nth-child(1) {
padding-top: 1px;
width: 28px;
}
#logo span:nth-child(2) {
padding-top: 1px;
width: 22px;
}
#logo:hover span:nth-child(1), .hmslider-visible #logo span:nth-child(1) {
padding-top: 1px;
width: 100px;
}
#logo:hover span:nth-child(2), .hmslider-visible #logo span:nth-child(2) {
padding-top: 1px;
width: 100px;
}
So I have an image rollover effect that requires two images to be within a list item. They are then overlaid each other within the CSS and transition on the hover state.
I have some text that needs to underneath each image, but since one of the image is position:absolute it just hangs out behind the image:
I've tried to wrap the text within a paragraph tag, but for some reason Wordpress is stripping them out within the editor (I'm guessing cause it's within a li).
I also tried to implement some line-height as well, but that janks it up too.
Here's a sample of the HTML markup:
<li>
<img class="alignnone size-full wp-image-153" alt="lucas2" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas2.png" width="117" height="117" />
<img class="alignnone size-full wp-image-154 top" alt="lucas1" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas1.png" width="117" height="117" />
The Dungeon Master
</li>
And here's the CSS:
.crew ul li {
display: inline-block;
list-style: none;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 75px;
font-size: 1.1em;
font-style: italic;
color: #71767d;
font-weight: 300;
position: relative;
width: 117px;
height: 117px;
vertical-align: bottom;
}
.crew ul li img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
left: 0;
}
.crew ul li img.top:hover {
opacity: 0;
cursor: pointer;
}
Overall, I'm trying to keep it a simple as possible so other users can just go into the editor and insert the images and add the text without having to edit any of the HTML within the text editor. Thanks!
Why do you don't use a top property to move the image and the text able to be seen?
E.g.
.crew ul li img {
top: 10px;
}