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>
Related
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>
How can I make a div that has vertical align:top, change it's position to vertical-align: middle, but have a smooth animated transition through those states?
I can't get it to work, is vertical-align non transitionable?
Code:
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
vertical-align:middle;
}
Here's the fiddle: https://jsfiddle.net/7amp783t/
Instead of changing the vertical-align property, use transform: translateY() to move up and down.
I've had a fiddle and got this code to work:
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
display:table-cell;
vertical-align: bottom;
transition: all 2s ease-in-out;
}
.inner:hover{
transform: translateY(-50%);
}
The translateY(-50%) moves the text "up" (hence the -) by 50% of the height of its parent box.
EDIT You don't need to worry about setting the position: relative of the parent div. I've removed it for clarity.
I've updated your JSFiddle, also.
if you want to use vertical-align, you should not use inside a table-cell but with 2 elements side by side, where you can set values around the line-height they produce. In this case, vertical-align can take lots predefined values or numerics values.
https://www.w3.org/wiki/CSS/Properties/vertical-align#Values
Because your example gives an height of 200px, we may play around this : https://jsfiddle.net/7amp783t/5/
.outer{
font-size:18px;/* whatever */
width:200px;
height:200px;
background:red;
text-align:center;
}
.outer:before {
content:'';
display:inline-block;
height:100%;/* here the line is 100% height of container: set to 200px */
vertical-align:calc(-200px + 1em); /*chrome instead bottom */
}
.inner{
vertical-align:0;/* from bottom : calc(-200px + 2em) go all the way down minus room for text */;
display:inline-block;
transition:all 2s;
}
.outer:hover .inner{/* outer, else you need to follow inner */
vertical-align:calc(-100px + 1em);/* lets go half way */
}
<div class="outer">
<div class="inner">
Hover me box
</div>
</div>
CSS Transitions defines vertical-align as animatable, but only when interpolating between two length values.
┌────────────────┬───────────┐
│ Property Name │ Type │
├────────────────┼───────────┤
│ vertical-align │ as length │
└────────────────┴───────────┘
Therefore, transitions between bottom and middle won't be smooth.
If you were using vertical-align to align an inline-level element relatively to its line box, you could try using length values.
However, you are using it on a table cell, which has a different behavior, as defined in Table height algorithms. In particular, length values don't apply to table cells.
I think you have to use Jquery to create a sliding animation. You can use jQuery's toogle function to do so.
http://api.jquery.com/toggle/
http://api.jquery.com/slidetoggle/
Try transform instead of vertical aligning it to middle. This code will do same what you are trying to accomplish. Change your hover state to include translateY(-50%)
Working Demo
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
transform: translateY(-50%);
}
u can try this sample:
using the transform: translateY(-50%); method
css vertical align animation
.block {
background: orange;
height: 500px;
}
.centered {
text-align: center;
background: pink;
position: relative;
top: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.block:hover .centered {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
}
let me know if u need further help
position:relative can be an easy way:
.outer {
width: 200px;
height: 200px;
background: red;
display: table;
text-align: center;
}
.inner {
position: relative;
top: 0;
display: table-cell;
transition: all 2s;
}
.inner:hover {
top: 50%;
}
<div class="outer">
<div class="inner">
Hover me
</div>
</div>
i have a div which is box and a 'p' element whose opacity is set to 0. when i hover over the div i want the 'p' elements opacity to change to 1. i have the following code . its looks proper to me but its not working. i could not figure out the problem with it. can some one help me. thanks in advance.
HTML:
<p class="se">Hover over the div element below</p>
<div class="box"></div>
css:
.se{
position: relative;
color:red;
opacity:0;
}
.se{
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
.box{
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;
}
box:hover + .se{
opacity:0;
}
jsFiddle http://jsfiddle.net/2f1k5yq4/
CSS selector +
Any element that is the next sibling of a previous element (that is: the
next child of the same parent)
.box {
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;
}
.se {
color: red;
opacity: 0;
position: relative;
transition: 1s linear;
}
.box:hover + .se {
opacity: 1;
}
<div class="parent">
<div class="child">
<div class="box"></div>
<p class="se">Hover over the div element below</p>
</div>
</div>
This is actually a kind of annoying problem with just CSS. I'd prefer using Javascript, especially if you already have jQuery loaded into your site.
But, that said, this can sort of be done in CSS. I'm going to assume you just want to show/hide an element, so I'll use display for the example rather than opacity, so modify as needed to use a transition.
The first problem you have is that you box:hover rather than .box.hover. The second problem is a bit more annoying. Abhitalks is correct that +, the adjacent sibling selector, only selects the next sibling, so you can't have the text above the div that will show it. If, however, you switch the order, moving the div above the text, it works. You could use some clever positioning, floating, etc. in order to make the order of their appearance different than their order in the markup, if you wanted.
.se{
display: none
}
.box{
width: 100px;
height: 100px;
background: red;
}
.box:hover + .se{
display: block;
}
<div class="box"></div>
<p class="se">Hover over the div element below</p>
Hi I am trying to rotate an image when i hover over a div using Rotate and Transform-Origin. It was works when the image is centered in the div but when i change the vertical position of the image and make the relevant changes to the Transform-origin values the image still rotates but is slightly off center. Any ideas would be appreciated.
jsfiddle here (only seems to work in firefox)
http://jsfiddle.net/boyle/U3yLk/
html
<div class="box">
<div class="c">
<img class="pic" src="p.png"/>
</div>
css
.box{
width: 200px;
height: 300px;
background-color: #4781AA;
display:block;
}
.c{
width:200px;
height:300px;
display:block;
transition: all 1s ease;
}
.c:hover{
transform: rotate(180deg);
transform-origin: 100px 150px;
}
.pic {
position: relative;
left:50px;
top: 100px;
}
This also only seems to work in Firefox!
Cheers
try this
.transform{
transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
}
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.