how to remove the transparency/opacity of the <img> element when the user hovers over it with the mouse pointer?
Opacity value is 1 by default, so you have to change it to less than 1 then on hover selector you make again 1.
something you have to be aware of that all child elements will be effected by the parent div opacity.
to make cooler you can use transition: all 0.5s ease; for example with it
Read more about it here ( Css transition)
More about css opacity here
div {
height: 40px;
width: 100px;
background: #007cb0;
padding: 10px 20px;
color: white;
line-height: 40px;
text-align: center;
opacity: .4;
}
div:hover {
opacity: 1;
}
<div>Hover</div>
Set opacity: 1; on hover (:hover) element
opacity: 1 is default definition that mean without any opacity
Learn about :hover:https://www.w3schools.com/cssref/sel_hover.asp
img {
opacity: 0.5;
}
img:hover {
opacity: 1;/* To remove opacity */
}
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Forest" width="170" height="100">
Related
I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition. The colour and background colour bit is working, but it seems to ignore the width transition.
Snippet:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-fill-mode: forwards;
transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
border: 2px solid #5e0734;
overflow: hidden;
white-space: nowrap;
margin-right: 0;
margin-left: 5px;
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}
.home-bar:hover {
background-color: #5e0734;
color: white;
width: 100%;/*WIDTH IGNORED*/
text-decoration: none;
}
#bar0 {
-webkit-animation-name: grow0;
animation-name: grow0;
}
#keyframes grow0 {
from {
width: 0%;
}
to {
width: 75%;
}
}
LINK
Note - I've tested it with changing the height of the link on hover, and it worked. Only the width does not work. Perhaps it has something to do with the animation on page-load.
When you set width using animation you will override any other width defined with CSS inluding the one defined by hover. The styles inside a keyframes is more specific than any other styles:
CSS Animations affect computed property values. This effect happens by
adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the
level for CSS Animations) that will produce the correct computed value
for the current state of the animation. As defined in [CSS3CASCADE],
animations override all normal rules, but are overridden by !important
rules. ref
A workaround is to consider both width/max-width properties to avoid this confusion:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
animation: grow0 1.5s forwards;
transition: color, background-color, max-width 0.2s linear;
border: 2px solid #5e0734;
max-width: 75%; /*Set max-wdith*/
}
.home-bar:hover {
background-color: #5e0734;
color: white;
max-width: 100%; /* Update the max-width of hover*/
text-decoration: none;
}
/*Animate width to 100%*/
#keyframes grow0 {
from {
width: 10%;
}
to {
width: 100%;
}
}
LINK
How can I realize a smooth transition for my mobile menu?
The transform property is working, but I want it to happen slowly..
My Sass looks like this
.mobile-nav
display: none
position: relative
width: 100%
background: $white
padding: 30px 0 20px
transform: translateY(-100%)
#media (max-width: 775px)
.mobile-nav.is-o
display: block
transform: translateY(0%)
The main obstacle you're facing is that the display property is not animatable.
Like a light switch, display: none is off and display: block is on. There's no middle ground, no fade effects, no CSS transitions.
However, there are multiple other properties you can use for transitions. Among them:
height
opacity
z-index
background-color
Here's an example:
.mobile-nav-toggle {
font-size: 2em;
cursor: pointer;
}
.mobile-nav {
display: inline-block;
overflow: hidden;
width: 0;
height: 0;
opacity: 0;
transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s;
}
.mobile-nav-toggle:hover + .mobile-nav {
width: 150px;
height: 150px;
opacity: 1;
background-color: lightgreen;
transition: 1s;
}
<div class="mobile-nav-toggle">☰</div>
<div class="mobile-nav">
<ul>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
References:
Full list of animatable properties in CSS
Transitions on the display: property
I personally use opacity combined with visibility to achieve fade effect like I would like for whole element. Remember to manipulate z-index, so you "hidden" object won't be clickable when dissapeared.
I'm making a css animation (for starters just in Chrome, to avoid needing to retype a bunch of browser specific code a hundred times) with quite a lot going on:
First these steps simultaneously:
Children of element fade out
Height of element changes to fixes height
Background color of element changes
Next step:
Fade in a hidden element
As for what I have, all of step 1 seems to work. I'm tryng to do this all by adding a single class to the element itself, but this causes some difficulties with step 2. Because when the class is added the hidden element should be display: block;, but this unfortunately causes it to already take up space when the first steps are still going on.
Here is a live demo. It only needs to be 1-way, so you have to re-run the fiddle to try the animation again.
This is some basic html:
<div class="card">
<div class="check"><svg style='width:100px;height:100px; margin: 10px auto 10px auto; z-index:20; display: block;' viewBox='0 0 24 24'><path fill='red' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /></svg></div>
<div>Random content</div>
</div>
And a part of the css:
.card.done div:not(.check){
transition: opacity .5s ease-in-out;
opacity: 0;
}
.check:not(.done){
display: none;
margin: auto;
opacity: 0;
transition: opacity 1s 0.5s ease-in-out;
}
.check svg{
height:100px;
margin:10px auto 10px auto;
}
.card.done div.check{
display: block;
opacity: 1;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes fadeInFromNone {
0% {
display:none;
opacity: 0;
}
50% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
.card.done{
transition: height .5s ease-in-out;
background-color: #4CAF50;
height: 120px !important;
}
I not entirely sure I understand the problem but I think what your wanting is the SVG element to not take up space which you can do by making it position absolute
http://jsfiddle.net/p9czu73n/
.card.done div.check{
position:absolute;
margin-left:-50px;
left:50%;
....
}
just use:
$(".card").css("height", "auto");
or use add
height:auto; to .card class
anything will fine
I'm wondering if there is any way to override just the transition-property that I define with the following statement:
transition: all 0.2s;
I would like to override transition-property to:
transition-property: width, height, opacity, font-size;
However, when I add the second line after the first, transition won't work. Why is that?
The reason why I'm trying to do that is because my transition won't work on Safari 5.1 if I define it with all, so I want to override property all with individual properties just for the webkit support.
you could also use just one property
div {
transition: width 2s, height 2s, font-size 2s,opacity 2s;
width: 200px;
height: 200px;
opacity: 1;
font-size: 20px;
background-color: red;
}
div:hover {
width: 400px;
height: 400px;
opacity: 0.8;
font-size: 40px;
background-color: blue;
}
<div>Hello</div>
if(Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0){
var div = document.getElementById("idName");
div.style.transition-property = "width:value,height:value,opacity:value, font-size:value;";
}
Use this in javascript function to check if the browser is Safari and set the style to that particular element
It works for me
div {
transition: all 2s;
transition-property: width, height, opacity, font-size;
width: 200px;
height: 200px;
opacity: 1;
font-size: 20px;
background-color: red;
}
div:hover {
width: 400px;
height: 400px;
opacity: 0.8;
font-size: 40px;
background-color: blue;
}
<div>Hello</div>
I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition