I am trying to create a simple image link button that when I move my mouse on it, it gets a bit larger.
I managed to do it with this simple code below but now I just want to move also the paragraph when the image is getting larger..
Any hints on how I can select and move the paragraph when I hover over the image?
<div id="rightImage">
<img src="images/image.jpg" alt="image" onmouseover="this.className='mouseOver'" onmouseout="this.className='mouseOut'" />
<p>paragraph</p>
</div>
#rightImage
{
width:275px;
height:275px;
float:left;
position:relative;
}
.mouseOver
{
width:300px;
height:300px;
top:-40px;
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
.mouseOut
{
width:275px;
height:275px;
float:left;
margin-right:52px;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
This enlarges the image, increases the size of the shadow and keeps the <p> element visible.
(EDIT: I forgot to encode the angled braces around the p)
Perhaps it's what you need?
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#rightImage
{
height:275px;
float:left;
position:relative;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
#rightImage:hover img
{
height: 300px;
box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
}
</style>
</head>
<body>
<div id="rightImage">
<img src="img/redBaron.jpg" alt="image"/>
<p>paragraph</p>
</div>
</body>
</html>
Remove position:absolute
.mouseOver
{
width:300px;
height:300px;
z-index:1;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
Demo http://jsfiddle.net/aRv2M/2/
Try this. I hope it works for you.
<div id="rightImage">
<img src="images/image.jpg" alt="image" width="275px" height="275" />
<p>paragraph</p>
</div>
use this css
#rightImage{
width:275px;
height:275px;
float:left;
position:relative;}
#rightImage:hover{
width:300px;
height:300px;
top:-40px
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;}
#rightImage:hover p {
position:relative;
margin-top:30px;}
Related
I've finally been able to get my site back up and finish building it, yet I am not satisfied with the front end.
My current goal is have the the mobile display with 2 items in 2 rows.
But my issue is when I use the Chrome mobile view and my personal phone, it still copies the attributes from "fbox".
HTML:
<div id="row"1><div class="fbox mfbox" id="breast">test </div>
<div class="fbox mfbox" id="facial">test </div></div>
<div id="row2"><div class="fbox mfbox" id="body"> test</div>
<div class="fbox mfbox" id="surgery">test </div></div>
CSS:
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
.row1{
clear:both;
}
.row2{
clear:both;
}
}
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
I've added it to JSfiddle, but it does not seem to produce the results my site does.
My site: Site Removed.
Write media query under the .fbox like below
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#row1, #row2 {
clear: none;
}
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
#row1{
clear:both;
}
#row2{
clear:both;
}
}
See fiddle
In your case first .mfbox is applied good but after .mfbox there is another css .fbox so the css is replaced from .mfbox to .fbox, in that case you should apply midea query at the bottom.
Remove clear when outside of the media query,
and use # instead of . when using id
i.e. #row1 instead of .row1
You said you want two items in a row. But your css
.mfbox{
...
width:100%;
height:200px;
display:block;
}
means only one item at a row with 100% width & height of 200px.
Also in your code you are getting issues because, you had two class, and in css you defined styling for both class in the order .mfbox & .fbox. So while applying css styling obviously it will take later defined style only.
However, if you want to apply different css for mobile view and different for desktop, its not necessary to use two classes. You can handle this with only one class & in css can handle with #media.
For example:
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#media (max-width:767px){
.fbox{
width:100%;
height:200px;
display:block
}
}
Can u tell me what is wrong with my code?Why there is no shadow on image?
Here is my code:
HTML
<div class="wrapper">
<img src="http://i.imgur.com/aVt9qPi.png"/>
</div>
CSS
div.wrapper img{
-moz-box-shadow:inset 1px 2px 18px #000000;
-webkit-box-shadow:inset 1px 2px 18px #000000;
box-shadow:inset 1px 2px 18px #000000;
}
U can find working demo here
you cannot apply shadow inset effect directly on image. Better apply it on the div.
Check the DEMO.
div.wrapper{
-moz-box-shadow:inset 1px 2px 18px #000000;
-webkit-box-shadow:inset 1px 2px 18px #000000;
box-shadow:inset 1px 2px 18px #000000;
}
div.wrapper img{
position:relative;
z-index:-1;
}
Inset shadows do not work on image tags, but you can wrap your img in a parent element to achieve the same effect.
See this solution for an example.
My page renders incorrectly (not how I want) on the first load, then when refreshed is correct. It's has to do with the "display:inline-block" I think. I've done a lot of research but I can't seem to figure this one out. And yes.... I've cleared my cache before loading it, I get the same result.
first load:
after refresh:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="ribbon-start"></div>
<div id="ribbon-shade"></div>
<div id="banner">
<div id="titles">
<div id="name">The Person</div>
<div id="profession">Their Profession</div>
</div>
<div class="tip"></div>
<div class="nav-butts">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div> <!-- header -->
<div style="height:900px; width:1px"></div><!-- SCROLL TEST -->
<div id="footer">
<div id="toTop">^</div>
</div> <!-- footer -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryeasing.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
<script type="text/javascript" src="js/behaviour.js"></script>
</body>
</html>
and the CSS
body{
background-color:#00FFFF;
}
#ribbon-start{
z-index:-2;
position:absolute;
top:10px;
left:0px;
width:49px;
height:100px;
background-color:#181818 ;
}
#ribbon-shade{
z-index:-1;
position:absolute;
top:10px;
left:25px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-right:24px solid #909090 ;
}
#banner{
margin:21px 0 0 17px;
width:90%;
height:100px;
background-color:black ;
-webkit-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
}
#titles{
display:inline-block;
}
#name{
margin: 0 0 0 80px;
font-size:84px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#profession{
margin: 0 0 0 10px;
font-size:34px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#banner .tip{
display:inline-block;
margin: 0 -49px 0 0;
float:right;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid black;
}
.nav{
margin:0 0 0 17px;
width:90%;
height:100px;
}
.nav-butts{
display:inline-block;
padding:8px 8px 8px 8px;
background-color:black;
border-radius:38px;
margin:8px 0 0 0;
float:right;
}
.circle{
margin:5px 8px 0 8px;
display:inline-block;
height:60px;
width:60px;
background-color:white;
border-radius:30px;
}
.sticky {
margin-top:10px;
position: fixed;
left:-8px;
top:-8px;
z-index: 100;
border-top: 0;
}
.sticky .nav-butts{
-webkit-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
}
#toTop{
position:fixed;
text-align:center;
left:10%;
bottom:-15px;
height:60px;
width:70px;
font-size:64px;
background-color:black;
font-family: 'RalewayThin', sans-serif;
color: white;
border-radius:20px;
cursor:pointer;
}
#font-face
{
font-family: RalewayBold;
src: url('fonts/Raleway-Bold.otf');
}
#font-face
{
font-family: RalewayLight;
src: url('fonts/Raleway-light.otf');
}
It worked fine for me on the first load. I have worked with php in the past and found that an error appears underneath at the first load but disappears at the second load. Try different browsers. One may just be acting up.
I've included this line
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
This clears the problem but isn't really the answer to this question. This code makes the browser call for the styles instead of using cached ones for every load, I believe.
I am having issues with rounding corners, they keep wanting to crop off on the left side by a few pixels. Below is the code I am using. I've tried increasing numbers and decreasing numbers; I've added a wrapper; I've tried all different solutions I can find for searching, but it still crops off. Can anyone give me a hand since I don't seem to be very handy? And apparently I can't post a picture of what it looks like either.
<style>
.image
{
width: 200px;
position:relative;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-khtml-border-radius: 14px;
border-radius: 14px;
overflow: hidden;
}
#slideshow
{
margin:0 0 0 0;
position:relative;
width:200px;
height:133px;
padding: 10px;
overflow:hidden;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-khtml-border-radius: 14px;
border-radius: 14px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
#slideshow > div
{
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function()
{
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<div id="slideshow">
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
</div>
I had the very same problem when the border-radius spec came out. Turns out you have to add border-radius to the <img> tag. Then you can either keep or remove the <div>'s border-radius property.
Essentially you need to be dealing with nested rounded corners which are fairly helpfully generator with this useful tool.
http://joshnh.com/tools/get-your-nested-border-radii-right.html
I've been able to solve this issue using the following css. This has worked on my sites I hope it can help you out with your problem. Not sure if it's a argument you are missing or not.
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
You can try this:
div.circle
{
width: 10px;
height: 10px;
background: white;
border-radius: 28px;
-moz-border-radius: 64px;
-webkit-border-radius: 64px; padding:32px;
border: 2px black;
color:white;
text-align:center;
-webkit-box-shadow: 0 0 1px rgb(255,0,0);
-moz-box-shadow: 0 0 1px rgb(255,0,0); box-shadow: 0 0 1px rgb(255,0,0);
}
I have a site and I want to use .less instead of .css but I have a problem with border radius, if I copy the same code into a css file work in .less doens.'t work, It doesn't take my radius and the div is rectangular. I have used a compiler and It gives me 0 error. I don't know if is a problem of compatibility. this is my code that doesn't work in less but in
css work:
.colLeft{
position:absolute;
top:0;
left:0;
background:#fff;
height:100%;
width:24%;
z-index:0;
}
.colCenter{
position:absolute;
top:0;
left:18%;
height: 100%;
width: 68%;
background: #ccc;
border-left: 1px solid #333;
border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
z-index:100;
overflow:hidden;
-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
}
.colRight{
position:absolute;
top:0;
left:81%;
background:#fff;
height:100%;
width:18%;
z-index:1000;
border-left: 1px solid #333;
border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
}
Html:
<div class="colLeft" id="one">
</div>
<div class="colCenter" id="two">
<div class="content">
<div class="img_background">
<img src="img/sfondi/<?php echo (basename($_SERVER['HTTP_REFERER'],'.php')); ?>.jpg" alt="" class="old_img"/>
</div>
</div>
</div>
</div>
<div class="colRight" id="three">
index
NEXT
</div>
border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
should be
border-radius: 50px 0px 0px ~"50px / 250px" 0px 0px 250px;
otherwise you get a division.
Less is in the process of introducing a policy of only doing division inside brackets so that valid css is unaltered, but this will be in a future release (e.g. maybe 1.4.0)