So I have this picture:
http://www.kyea.org/imageuploads/MC900382613.JPG
It's of a hand with a pencil and I'd like to position it on my web page so that it looks like it's writing the content. Is there a way to do this? I've tried messing around with background-origin, background-size, background-position, and nothing seems to work.
The following css est the image position .....
img {
position:relative;
float:right;
top:-15px;
left:-198px;
}
#text {
position:relative;
color:green;
text-align:left;
top:50px;
right:-90px;
}
for demo:JSFIDDLE DEMO
Related
I have an image which has and inner border with opacity set to .7 and round corners, which works great. The only problem is i need to add a hover state to image. I have tried :hover but nothing seems to work.
The border needs to go blue and with a png overlay.
HTML:
<div class="box" >
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1" >
</div>
</div>
CSS:
.box{
width:191px;
background:#FCFBDF;
margin: 0 auto;
}
img{
width:191px;
height:191px;
display:block;
border-radius:50%;
}
.imgWrap{
position:relative;
}
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border: 10px solid rgba(248, 248, 255, 0.7);
border-radius:50%;
}
JS Fiddle here
http://jsfiddle.net/zangief007/52fFF/3/
I am guessing you tried to fire the hover state on the image like this :
img:hover{
.. your code ...
}
But as there is a pseudo element over it, you can never hover the image.
The workaround is to trigger the hover state on the pseudo element like this :
.imgWrap:hover:after{
border-color:blue;
background: url('PATH TO YOUR IMAGE');
}
DEMO
Add hover like this.
.imgWrap:hover{
width:250px;
}
PS : I am just adjusting the width based on hover. But you could do whatever you like in the hover.
Hope this helps.
Cheers!
EDIT : Assuming you don't need to modify the image with the cat, web-tiki's solutions seems better.
I think you may have to use some Javascript/Jquery, as long as you can't directly trigger a mouse hover on the image (because there is some element above).
Here is an example.
$(".imgWrap").hover(function(){
$('img').toggleClass("imgHover");
$('.imgWrap').toggleClass("imgHover");
$('.box').toggleClass("imgHover");
});
.imgHover{
width:300px;
height:300px;
}
try this in your JSFiddle. don't forget to add Jquery lib
http://jsfiddle.net/52fFF/11/
As example i just changed the size of the Box, the Circle and the image.
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
I have an image we're using for navigation at the top of a website. I used to set links for each section of the banner. I want to an achieve an opaque effect on hover for each part of the image. Is this possible? Thanks much, Dane.
You could slice the image into seperate images; one for each roll over, the image would still appear to be one image but would have different sections; for the hover you could then either use javascript or have it replace the image with another that appeared opaque
This site shows both the JS method and the CSS method...
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
just repeat it for each part of the image
You can have a div over each section. Each div would call a javascript event. This even can change the div's style. Something like this:
<javascript>
function changeCss(getId){
var getDiv = document.getElementById(getId)
getDiv.className ="myHover"
}
</javascript>
<styles>
.plain{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
}
.myHover{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
filter: alpha(opacity=80);
}
</styles>
<div onMouseOver="changeCss(this.id)" id="wait" class="plain">
<img src=""/>
</div>
This is just free hand and has not been tested. Give it a try and let me know if there are any issues.
This is my code :
HTML
<div class="myDiv">text under link!</div>
<a class="myLinkTransparent" href="#"> </a>
<a class="myLinkRed" href="#"> </a>
CSS
.myDiv
{
position:relative;
z-index:40;
width:310px;
}
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:transparent;
}
.myLinkRed
{
z-index:50;
position:absolute;
top:0px;
left:100px;
width:100px;
text-decoration:none;
background-color:red;
}
both link with transparent and red background should be "linked".
But in fact, on IE (every version I try: 7,8,9) the link is "broken", such as a "hole" to the text above the link.
Why? And how can I fix this?
1 . The behaviour is not exactly as you expect originally due to Normalized CSS option set in JsFiddle by default (look at the left under JS frameworks choice and so). Lets remove it to guarantee we own all styles.
2 . However, just unchecking that won't fix it completely. You'll be able to sense it on the top left taking small width and height.
To fix the width, you need to set display:block;
3 . To fix the height, you need to set actual height. For example height: 35px;.
4 . After all this, you'll find the link is clickable only in areas that's not text, because the browser knows it's transparent, it thinks it's click-through also.
This behaviour is described here: http://haslayout.net/css/No-Transparency-Click-Bug
You need to apply the below fix (copied from article, just changed filename):
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="non-existing-or-so.png",sizingMethod="scale");
.
The modified fiddle (tested in IE9 standards modes for IE9, IE8, IE7:
http://jsfiddle.net/Meligy/PPdbc/11/
Not sure but may be a bug.
You can try the workaround below
set background-color as green in myLinkTransparent class
Then set opacity to zero just by setting filter:alpha(opacity=0); in myLinkTransparent class
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:green;
filter:alpha(opacity=0);
}
Please can anyone help me to put something over the iframe like div or canvas, my case is i have iframe from Photosynth.net, and i need to put like character over this iframe ??
and i use the z-index but still it's not working.
I have created a simple sample showing how to use CSS to position content over top of an iframe. It's just simple CSS layering:
<iframe src="http://phrogz.net/"></iframe>
<div id="over">HI MOM</div>
And then in your stylesheet:
iframe { width:100%; height:300px; border:3px groove #f00 }
#over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }