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
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: ' ';
}
I have an unordered list as a menu and the current item has a class active. I want the the active item to have a little box below it like in the image attached. How would I do this using just CSS? If there is no (good) answer I will go old-school and create an image as a background-image.
What you're describing can be done using a pseudo-element and positioning it relative to the element you're decorating: http://jsfiddle.net/fC7gn/
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
top: 100%;
width: 100%;
height: 10px;
background-color: blue;
}
You can add the following to your CSS:
a:hover{border-bottom:10px solid red;}
You can add the border-bottom style to any element. I attach it to the a tag so it spans the entire width of the content it contains.
Here's an example fiddle (don't mind the extra fluff)
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/
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;}
I am writing a CSS stylesheet to add a background image to a div identified by its class name as follows:
.scrollingResultsContainer
{
background-image: url(https://mdl0133/widget/Images/gradient.gif);
background-repeat: repeat-x;
background-attachment: fixed;
color:#FFFFFF;
}
This works fine except I have one particular situation where I do not want the image to appear in the scrollingResultsContainer. How can I specify that the image should be applied except when the scrollingResultsContainer happens to contain a div with a particular id?
Unfortunately, I am unable to amend the markup to prevent this situation from occurring.
I was wondering if it can be done using CSS3 selectors.
You can't do this with CSS. A parent selector has been proposed many times but is always rejected because apparently it's just too hard to code or something:
http://www.css3.info/shaun-inman-proposes-css-qualified-selectors/
You'll have to use javascript I'm afraid.
CSS4 might make this possible in the future, see http://davidwalsh.name/css4-preview.
Over-ride it in the CSS if you know the ID in advance.
.scrollingResultsContainer {
font-size: 200%;
}
#id_of_div {
font-size: normal;
}
If the only thing you want to do is prevent the image from showing up, this is fairly simple with CSS. You can use the ::before pseudo-element on the child <div> to cover the image and z-index to get the layers right.
Demo:
Output:
CSS:
.scrollingResultsContainer {
background-image: url( 'http://placekitten.com/100' );
border: 1px solid black;
display: inline-block;
height: 100px;
position: relative;
vertical-align: top;
width: 100px;
z-index: -2;
}
.dont-show::before {
background-color: white;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: -1;
}
HTML:
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer">
<div class="dont-show">don't show</div>
</div>
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer"></div>