I wanted to add an overlay to an image if they hovered over the image.
I have tried plenty of ways but the image just seems to disappear or stay the same.
This is what it will be like
<a id="icon"
style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;"
href="page.php?pageid=123" title="Icon">
</a>
Really and truly, what I am after is a quick way to have the image change without having to make more images.
So when not hovering over the image - Original image
When hovering over the image - 40% color overlay?
Thanks in advanced.
What I tried:
a.thumbnail {
background-color:orange;
filter: Alpha(Opacity=40, Style=0);
-moz-opacity: 40%;
opacity: 0.4;
}
I created a little fiddle that has this doesn't overlay, but gives the same effect using just CSS. Plus, I threw in some CSS transitions for fun. Basically creating a div behind the image that is revealed via pseudo element hover. This way you can drop in your tags still without needing to create CSS background images like crazy. Just swap out the alpha stuff to make the overlay work the other way.
http://jsfiddle.net/wesleyterry/jwXvA/#base
Hope that is what you were looking for.
Basically, if it's an overlay you can assume the height and width is probably going to be the same.
in this demo i accidentally used images sized 25. change to 23
http://jsfiddle.net/raU2J/7/
<div class="overlay_wrapper">
<div class="overlay"></div>
<img src="cake.jpg" />
</div>
.overlay,
.overlay_wrapper a,
.overlay_wrapper {
width: 25px;
height: 25px;
position: relative;
}
.overlay_wrapper a {
position: absolute;
z-index: 10;
display: block;
}
.overlay {
display: none;
background: red;
position: absolute;
top: 0;
left: 0;
filter: Alpha(Opacity=40, Style=0);
-moz-opacity: 40%;
opacity: 0.4;
z-index: 9;
}
jquery:
$(".overlay_wrapper").hover(
function () {
$(this).find('.overlay').fadeIn();
},
function () {
$(this).find('.overlay').fadeOut();
}
);
This is not possible with just the single <a>, but you can put the <a> in a container (a span or a div). Give the container the desired background, and give a:hover a background color like rgba(255, 255, 255,.4).
If that doesn't work like you want, explain more about your requirements.
The sample demo:
html
<div class="img"><div class="overlap"></div></div>
css
.img {width:100px;height:100px;background:red;position:relative;}
.overlap { visibility:hidden;}
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */ -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}
Related
Is it possible to apply a css blend mode to an element in a different div?
E.g, I have a large background hero image in one div. Above that image (in a different div) I have a blue semi-transparent box with text in it. This transparent box is what I would like to apply a blend to, but it seems to not work perhaps because they are not in the same div, like in the example https://css-tricks.com/basics-css-blend-modes/
I am working in wordpress, so it will be a bit hard to re-structure the HTML in order to put the image and the colored box in the same div.
Does anybody know of a trick I can use to achieve this method?
Thanks in advance!
Use mix-blend-mode.
DEMO:
http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview
There are two ways to use blend-modes:
background-blend-mode: If both the background are in same div, then this property can be used.
mix-blend-mode: When you want to blend background of 2 different elements, then you can use the mix-blend-mode property.
code:
HTML:
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
CSS:
div.wrapper {
position: relative;
}
div.first,
div.second {
width: 300px;
height: 200px;
position: absolute;
}
div.first {
background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
z-index: 9;
top: 0px;
left: 0px;
}
div.second {
background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
z-index: 10;
mix-blend-mode: difference;
top: 30px;
left: 120px;
}
Here is a trick:
you can add both divs in a single div.
Then in css You can add the two backgrounds for a single div. This way, you can use the background-blend-mode property to blend the two images.
Here's an example: https://jsfiddle.net/4mgt8occ/3/
You can use :after or :before to create another element in the img-div. Then set the background color with rgba(). The 0.2 here is the opacity of the background color. For the text div, you don't have to do anything about it.
div#wrapper::after {
background-color: rgba(216, 223, 228, 0.2);
display: block;
width: 100%;
height: 100%;
content: ' ';
}
Ok so, I have this map:
I need to add a rollover effect to the country names (this could be done with a simple :hover in CSS) but I can't find a good way to select just a portion of the text so if I hover "Europe" it just highlights Europe and not every word.
The image is in a PSD so I have access to the base map + layers. How could I approach this? I was thinking about adding all the text in HTML and style it in CSS (rotating, spacing and such), which would take ages, and it would also be a pain to manage when adapting for different resolutions.
Can you masters suggest anything? Thanks :)
The images for reference (text made red just to show there's something there, this would be the rollover effect):
Here's an idea:
body {
position: relative;
}
img {
width: 100%;
}
.states {
position: absolute;
top: 0;
left: 0;
display: none;
}
.map-container {
width:960px;
transform-origin: 0px 0px;
transform: scale(0.8);
}
a.state-name {
position:absolute;
}
a.state-name:hover {
background-image: url("http://i.stack.imgur.com/aB42n.gif");
}
a#europe {
background-position: -420px -140px;
left: 420px;
top: 140px;
height: 45px;
width: 210px;
}
<div class="map-container">
<img src="http://i.stack.imgur.com/319c9.gif" />
<img src="http://i.stack.imgur.com/aB42n.gif" class="states" />
<a id="europe" class="state-name" href="#"></a>
</div>
Note:
you need to define for each country name a a tag and proper css rules: background-position, width, height, left, top like for #europe example
.map-container - must have the same width as the original image 960px
you need to use JS or CSS transform property to scale the whole .map-container if you need to resize the map, otherwise the hover elements will be misplaced.
Pay attention to css transform properties
This is an experimental technology. Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
I am an illustrator making a portfolio site.
I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image.
Do you mean something like this - DEMO?
What I've done is, I've created two classes (.pic and .text). .pic holds the picture and the other class contains the text. The .text class is positioned at the bottom of .pic and it has a height of 0; To make the text appear when you :hover over the image I just transition the height of .text, in this case from 0 to 150px;
Here the code from my demo
HTML
<div class="pic"><img src="http://placekitten.com/200/300" />
<div class="text"><p>This is a cat</p></div>
</div>
CSS
.pic {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
.text {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 0;
text-align: center;
background: rgba(255, 255, 255, 0.7);
transition: height 0.7s ease-out;
}
.pic:hover > .text {
height: 150px;
}
by rolling over the image, do you mean mouse-over event? this can be done in multiple ways. but probably if you dont have too much css or javascript knowledge. then just download an image caption plugin. one such plugin that comes to my mind is called jquery capty. just google it and follow instruction of adding like 2 lines of code. its that simple.another way is using CSS positioning of the caption text over the image and use display:none initially and on mouse hover event, use the css :hover pseudo class and give it display: inline-block. hopefully this helps
The best way to do this would be to add a :hover event within your CSS file once you're within Dreamweaver.
Something similar to this:
.class {
background: blue;
}
.class:hover {
background: red;
}
DEMO
This is not something that I've seen Illustrator be able to do and transfer it to Dreamweaver
I am using Raphael 2.1.0 (raphaeljs.com) with no problem. Actually I'm drawing elements upon a <div> with opacity: 0.6;. It is obvious that the Raphael elements get the same opacity.
I was wondering if there was any way to render opaque elements (100%) upon a transparent paper (60%).
Here is a JSFiddle to illustrate my thing.
What I thought at first was putting a layer without background right above my transparent <div>, which would be my paper. That way, it could give its opacity (100%) to my Raphael elements.
But I'm thinking I am missing an easier way.
From your fiddle, I can see that you have an outer div called #overlay and a div inside that called #paper. You are rendering your paper inside #paper and applying background:white; opacity:0.6; style to #paper itself.
As mentioned in comments in your question, using background-color: rgba(255,255,255,0.6); instead of opacity is an option. But that will not work IE 8 and below and alos on some older versions of other browsers.
A much more semantic way to do it would be to insert a new div with same height as the #paper before #paper and then apply a negative margin to #paper to bring it above the newly inserted div.
<div id="overlay">
<div id="paperbg"></div>
<div id="paper"></div>
</div>
And your CSS would go like
#overlay {
background: #88bb00;
height: 400px;
padding: 10px;
width: 200px;
}
#paper {
height: 400px;
width: 200px;
margin-top: -400px;
}
#paperbg {
width: 200px;
height: 400px;
background: white;
filter: alpha(opacity=60);
opacity: 0.6;
}
Updated Fiddle: http://jsfiddle.net/shamasis/AFTQV/8/
Hey i have this div that shows as a popup:
<div class="popup">
</div>
Then with jquery i add another class to it to give it with the css associated to that class, position, size, color and transparency:
.show {
position: absolute;
color: #F4F5F6;
width: 600px;
margin-left: -300px;
height:300px;
background: #000000;
left:50%;
top:200px;
filter:alpha(opacity=95);
-moz-opacity: 0.95;
opacity: 0.95;
}
My problem is this:
I'm adding text and image to the div.
ending up like:
<div class="popup show">
<div class="image">
<img scr="blabla.png">
</div>
<div class="text">
ble ble ble
</div>
</div>
My problem is the following, even though i have overriden the opacity here:
div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
The image still apears with transparency.
Is there anyway to override the opacity values without having to put the image div outside of the popup div?
Since the '.show' class has an opacity of 95%, so will all of its descendants. It's unfortunate, but that's how opacity works. The descendants cannot overcome their ancestor's opacity as long as they still truly remain descendants.
You'll have to either set the '.show' background with a semi-transparent png or result to some awkward html (see: Non-Transparent Elements Inside Transparent Elements)
Not trying to be jerky, but this Google search (or something similar) might help
Try this:
div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100) !important;
-moz-opacity: 1 !important;
opacity: 1 !important;
}
http://www.w3.org/TR/CSS2/cascade.html#important-rules
EDIT: sorry; I've even come across this before and didn't twig. I think that the nested element's maximum opacity is the same as the outer element's opacity; you can never get more opaque than your parent element! Last I checked this is a proper CSS issue, and I don't know a workaround.
As a workaround, you could try not making nested, but use some ucnning positioning trickery.