When I use the opacity on image hover. It only getting lighter or dimmer but not darker.
I have tried to increase the number of opacity to make it darker, but not success. Below is the code block that I have tried to make the image become darker on hover:
<style>
.category-product img {
display: block;
margin-left: auto;
margin-right: auto
}
.category-product img:hover {
opacity: 0.5;
}
</style>
<div class="category-product">
<img src="hinh/paris.jpg" data-img="product-image-1">
</div>
Image of opacity applied on my current try
I expect the image will become darker on hover.
Expected result
They way to use opacity is by the other side you are trying. 1 opacity means that element is full opaque, "opacity: .5" means half opacity, so you will see you element half transparent and the color of the element behind the image and thats your result.
A quick, better and easy way to get that effect is using filter propierties of css.
<style>
.category-product img {
display: block;
margin-left: auto;
margin-right: auto;
transition: all .3s;/* I put this to get smooth transition */
}
// Then at hover, you can do a filter: brightness and set a lower value
.category-product img:hover {
filter: brightness(0.4);
}
</style>
<div class="category-product">
<img src="http://lorempixel.com/output/sports-q-c-640-480-7.jpg" data-img="product-image-1">
</div>
Here is the example at Codepen:
https://codepen.io/ChemaAlfonso/pen/ROJNev
hope it helps you
Style opacity = 0.5 will make the image become dimmer but not darker. To make the picture become darker on hover, we set the background div containing the picture to dark. Thus, when hovered the picture will dimmer and with the black background, it will make the picture looks darker.
<style>
.category-product {
background: black;
}
.category-product img {
display: block;
margin-left: auto;
margin-right: auto
}
.category-product img:hover {
opacity: 0.5;
}
</style>
<div class="category-product">
<img src="hinh/paris.jpg" data-img="product-image-1">
</div>
In the code above, I just set the containing div with black background.
On mouse hover use background-color: rgba(black, 0.5); instead of opacity: 0.5;
<style>
.category-product img {
display: block;
margin-left: auto;
margin-right: auto
}
.category-product img:hover {
background-color: rgba(black, 0.5);
}
</style>
<div class="category-product">
<img src="hinh/paris.jpg" data-img="product-image-1">
</div>
Related
I am not that familiar with CSS animations. My client want to achieve the following result when hovering the contact button:
so to be clear:
the square's move from left to right and vice versa
when the square moves, the line underneath it changes color
the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.
Is this achievable with only CSS or do I need JS as well?
How would I approach this?
I created a quick and dirty JSFiddle here: https://jsfiddle.net/x0b397pb/
As you can see, it is possible with just CSS. In this example I used pseudo elements (::before and ::after) to create most of the elements.
You mentioned "Im not that familiar with CSS animations". For this I used transitions.
transition: left 1000ms, right 1000ms, box-shadow 1000ms;
Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).
To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.
Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.
Here is a small demonstration of css transition:
Consider this HTML:
<div class="container">
<div class="box"></div>
</div>
With this CSS:
.container {
position: relative;
width: 400px;
height: 400px;
border: solid 1px black;
}
.box {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
left: 10px;
background-color: red;
transition: all 1s;
}
.container:hover {
border-color: blue;
.box {
top: 200px;
left: 200px;
width: 160px;
height: 160px;
background-color: blue;
}
}
Or, check it on JsFiddle: https://jsfiddle.net/ronency/75ozjq3s/
.box {
background: linear-gradient(80deg, #f3efef, #90009f, #01060d);
background-size: 600% 600%;
animation: AnimationName 29s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
I want the caption of a image (which is not necessary is a real caption) appear when the image is hovered. The text should appear from left to right so it's container should grow on the X axis as the image is hovered. I have been able to make the text appear on hover but the transition effect is where I am stuck.
This is what I have tried:
CSS:
.morbid {
display: none;
margin-left:10px;
}
a:hover + .morbid {
position:relative;
display: block;
}
HTML:
<a>
<img src='.../goals/sia.png'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
Actually the whole div must grow, text remaining static and I want the text to be hidden unless the image is hovered.
You cannot transition the display property's change of value. The full list of properties which can be animated is available in the spec.
For the content to grow and appear you need to transition the max-width (or width, if you can set a fixed width to the element) like done in below snippet.
.morbid {
width: auto;
max-width: 0%;
white-space: nowrap;
overflow: hidden;
transition: max-width 1s linear;
}
a:hover + .morbid {
max-width: 100%;
}
<a href="#">
<img src='http://picsum.photos/400/200'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
JSFiddle
Alternately, if you want the text to grow from the center then you can make use of absolute positioning with transform like in the below snippet.
.container {
position: relative;
width: 400px;
}
.morbid {
position: absolute;
left: 50%;
max-width: 0%;
white-space: nowrap;
overflow: hidden;
transform: translateX(-50%);
transition: max-width 1s linear;
}
a:hover + .morbid {
max-width: 100%;
}
<div class="container">
<a href="#">
<img src='http://picsum.photos/400/200'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
</div>
JSFiddle
Use the transition property on the element you want to add a transition effect.
Make the caption grow and shrink in size:
CSS:
.morbid {
/* display: none; */
margin-left:10px;
opacity: 0;
font-size: 12pt;
-webkit-transition: font-size 0.25s;
transition: font-size 0.25s;
}
a:hover + .morbid {
position:relative;
/* display: block; */
font-size: 16pt;
opacity: 1;
}
HTML:
<a>
<img src='.../goals/sia.png'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
I had to change opacity for the caption instead of changing the display property because the animation doesn't show when changing the display property.
I have an image file and I want to show it in different tones with respect to different events. Say for on a click event on a button,I need to pass a color code and the tone of the image must be of that color. How can I do this,preferably only css?
You can try the colour blend feature available in css3. A sample would be:
.blend {
background-image:url(blend-mode-mult.jpg);
width:450px;
height:450px;
background-color: #f79e9e;/*pass your color variable here*/
background-blend-mode: multiply;
}
Something like this? I used #f6ff00 for this test, but you could of course use whatever. You can also change the .active class's opacity value.
$('.frame').mouseover(function(){
$(this).find('.color-block').addClass('active').css('background-color', '#f6ff00');
}).mouseleave(function(){
$(this).find('.color-block').removeClass('active');
});
.frame{
width: 300px;
height: 150px;
position:relative;
}
.frame img{
width: 100%;
height: 100%;
}
.frame .color-block{
position:absolute;
width:100%;
height:100%;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
opacity:0;
}
.frame .color-block.active{
opacity: 0.3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="frame">
<div class="color-block"></div>
<img src="http://photos2.appleinsidercdn.com/13.01.31-Newell.jpg">
</div>
I have block that has transparent background, but to prevent from transparent text I position block absolutely and put it behind content block. But now i need change background on hover (all block including children). Is it possible to achieve this using only css? Also I need it to work on IE 7..
Here is example how it works.
CSS
.block
{
position:relative; float:left;
}
span
{
position:relative; float:left;
z-index: 5;
background-color: red;
margin: 5px
}
.bg
{
background-color: blue;
position:absolute;
left: 0; top: 0;
width: 100%; height: 100%;
opacity: 0.5;
}
.bg:hover
{
opacity: 1.0;
}
HTML
<div class="block">
<span>this</span>
<span>is</span>
<span>some</span>
<span>content</span>
<div class="bg">
</div>
</div
http://jsfiddle.net/insanebits/wHBXn/4/
EDIT:
Question : Is it possible to achieve background color change on hover over abosolutely positioned background ?
In your example hover will not work when you are hovering mouse on text. You need to change background opacity when hovering on block. Here is example:
.block:hover .bg{
opacity: 1.0;
}
you might remove the empty div and create a 24-bit png file with blue background and 50% opacity to put as background-image of your .block element
Then, just change the background with .block:hover { ... }
.bg:hover
{
opacity:0.4;
filter:alpha(opacity=40);
}
use that option in .bg:hover..Its working in all IE browser.
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.