Im trying to set up a way of viewing photos when you hover over them and im having some trouble with floating and positioning. I've got it to work like this...
**HTML**
<div id="container-collection">
<div id="clothes1"><img src="Images/smallest/JPEG/IMG_3148.jpg" alt="1" width="211" height="316" onMouseOver="MM_showHideLayers('closeup1','','show')" onMouseOut="MM_showHideLayers('closeup1','','hide')"></div><div id="clothes2"><img src="Images/smallest/JPEG/IMG_3124.jpg" alt="2" width="211" height="316" onMouseOver="MM_showHideLayers('closeup2','','show')" onMouseOut="MM_showHideLayers('closeup2','','hide')"></div>
<div id="closeup1"><img src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg" width="432" height="648" alt="11"></div> <div id="closeup2"><img src="Images/Smaller/bigger ones/JPEG/IMG_3124_1.jpg" width="432" height="648" alt="11"></div>
</div>
**CSS**
#container-collection { width: 900px; margin:0 auto; padding-top: 90px; }
#clothes1 { float:left; left:0px; top:5px; width:209px; height:316px; z-index:1; }
#clothes2 { float:left; left:5px; top:5px; width:209px; height:316px; z-index:1; }
#closeup1 { float:left; left:400px; top:-316px; width:427px; height:648px; z-index:2; visibility: hidden; }
#closeup2 { position:relative; left:423px; top:-648px; width:427px; height:648px; z-index:3; visibility: hidden; }
but theres got to be a better way.
Cheers.
There are many JavaScript plugins you can use to quickly achieve this.
For example, try the bootstrap plugin:
http://twitter.github.com/bootstrap/javascript.html#popovers
NB: the data-content attribute in the <a> tag could hold HTML content. Just look out for the use of quotes.
<a href="#" rel="popover" data-content="<img src='image2.jpg' />" data-original-title="A Title">
<img src="image1.jpg" border="0" />
</a>
Optionally, a much simpler version to show a preview can be done with CSS only, utilizing hover.
<style>
a.info
{
position: relative; /*this is the key*/
z-index: 204;
color: #000;
text-decoration: none;
}
a.info:hover
{
z-index: 205;
background-color: gainsboro;
}
a.info span{display: none}
a.info:hover span
{
/*the span will display just on :hover state*/
display: block;
position: absolute;
top: 3em;
left: 1em;
}
</style>
<a class="info" href="javascript:focus();">
<img src="image1.jpg" /><span><img src="image2.jpg" /></span>
</a>
Related
Cant do it right way.
Editing html is not allowed
<div class="photo_box ">
<h4>LEARN MORE</h4>
<div class="image_frame">
<div class="image_wrapper"><img class="scale-with-grid" src="#" alt="" width="" height=""></div>
</div>
<div class="desc">
<h4>Lipoparticles</h4>
Lipoparticles are virus-like particles that concentrate membrane proteins in their
native-conformation. </div>
should be like this :
I think this will help you.
#image{
width: 100px;
height: 100px;
border-radius:50%;
background-color: red;
position:relative;
}
#image>span{
position: absolute;
color:yellow;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#image:hover{
/*image will be selected when hover*/
/*apply changes you want*/
filter:grayscale(40%);
}
#image:hover>span{
/*span will be selected when image is hover*/
color: blue;
}
/*For advance use: pseudo element*/
/*#image:hover::after{
content:'';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,20%);
}*/
<div id="image">
<span>Text</span>
</div>
Learn about Beginner Concepts:Selectors and different selectors
I am having trouble placing a multiple text in front of multiple images. The way I can achieve this is using absolute and relative positioning, with only 1 text above 1 image. But when used in multiple id's it is not working. Please show me a way. Thank you
#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1{
float:left;
width:100px;
position: absolute;
z-index: 51;
}
#box2{
float:left;
position: relative;
z-index: 11;
width: 100px;
}
#boxtext2{
float:left;
width:100px;
position: relative;
z-index: 50;
}
http://jsfiddle.net/k9b0vgeg/3/
If there's not some other reason to be using IDs (i.e. javascript), using classes would simplify this a lot.
.box {
float:left;
position:relative;
width:100px;
}
.box-text {
position:absolute;
top:0;
left:0;
}
<div class="box">
<img src="image.jpg" width="100"/>
<div class="box-text">Some Text 1</div>
</div>
<div class="box">
<img src="image.jpg" width="100"/>
<div class="box-text">Some Text 2</div>
</div>
Place the text div inside the main box div instead of placing it outside. There is no need to use float with the absolute positioned div. To adjust the left,right offset, add left and right css rules too.
HTML:
<div id="box1">
<img src="image.jpg" width="100px" />
<div id="boxtext1">Some text1</div>
</div>
<div id="box2">
<img src="image.jpg" width="100px" />
<div id="boxtext2">Some text2</div>
</div>
CSS:
#box1 {
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1 {
width:100px;
position: absolute;
z-index: 51;
bottom:10px;
}
#box2 {
float:left;
position: relative;
z-index: 11;
width: 100px;
}
#boxtext2 {
width:100px;
position: absolute;
z-index: 50;
bottom:10px; //for placement.
}
Demo: http://jsfiddle.net/lotusgodkk/k9b0vgeg/6/
You did not put your HTML code in the question, assuming your HTML is what is shown in your JSFIDDLE:
put your #boxtext1/2/3 etc inside your #box1/2/3 etc. respectively and style the box text accordingly.
DEMO : JSFIDDLE
HTML:
<div id="box1">
<img src="image.jpg" width="100px"/>
<div id="boxtext1">
Some text1
</div>
</div>
<div id="box2">
<img src="image.jpg" width="100px"/>
<div id="boxtext2">
Some text2
</div>
</div>
CSS:
#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1{
float:left;
width:100px;
position: absolute;
margin-top:-100px;
margin-left:5px;
}
#box2{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext2{
float:left;
width:100px;
position: absolute;
margin-top:-100px;
margin-left:5px;
}
I have a problem I can't solve.
i'm trying to auto center multiple 150x150px divs in a parent div that is 80% width (but it could also be 90% or 100%).
I have an isotope JQuery attached that works fine but when I enlarge my navigator window, the child divs do not move and furthermore, they do not center "live" (the menu above works fine).
Here is the html code :
<div class="portfolioContainer">
<div id="marque" class="interieur">
<p class="categorie"><a href="http://www.arper.it" target="_blank">
<img src="images/logo_arper_140_Noir.jpg" width="100" height="33"></a><br>
<span class="txt">ARPER</span><br>
MOBILIER</p>
</div>
<div id="marque" class="interieur exterieur">
<p class="categorie"><a href="http://www.b-line.it" target="_blank">
<img src="images/logo_bline_140_Noir.jpg" width="140"></a><br>
<span class="txt">B-LINE</span><br>
MOBILIER</p>
</div>
<div id="marque" class="audio ipod">
<p class="categorie"><a href="http://www.bowers-wilkins.fr" target="_blank">
<img src="images/logo_BW_140_Noir.jpg" width="80" height="33"></a><br>
<span class="txt">BOWERS & WILKINS</span><br>
AUDIO</p>
</div>
<div id="marque" class="audio">
<p class="categorie"><a href="http://www.clearaudio.de" target="_blank">
<img src="images/logo_clearaudio_140_Noir.jpg" width="80" height="74"></a><br>
<span class="txt">CLEARAUDIO</span><br>
PLATINES VINYLE</p>
</div>
</div>
and the CSS:
#container {
width:80%;
padding-top:50px;
position:relative;
margin: auto;
text-align:center;
}
p {
width:150px;
margin:0;
padding:0;
position:absolute;
bottom:20px;
text-align:center; /* centrage horizontal */
}
img {
padding-top:5px;
padding-bottom:10px;
}
#marque {
position:relative;
width: 150px;
height: 150px;
margin:2px;
float:left;
border: solid 1px #333;
text-align:center;
}
The page can be found at this address to see the whole html/CSS code:
www.pixsix.fr/marques.html
replace float: left to display: inline-block
test it :
#marque {
position:relative;
width: 150px;
height: 150px;
margin:2px;
display: inline-block;
border: solid 1px #333;
text-align:center;
}
I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle
http://jsfiddle.net/EuRJE/
Here's the testing site: http://www.wandernetwork.com/
and here's the code:
also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated.
<head>
<meta charset='UTF-8'>
<title>Wandercraft Network</title>
<style media="screen" type="text/css">
#page-wrap {
width:620px;
margin:0px auto;
}
.slide-up-boxes a {
display:block;
width:300px;
height:300px;
background: #eee;
overflow:hidden;
}
.slide-up-boxes h5 {
height:300px;
width:300px;
text-align:center;
line-height:150px;
-webkit-transition: margin-top 0.3s linear;
background-color:#white;
}
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}
.slide-up-boxes div {
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
-webkit-transform: rotate(0);
opacity:1;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
.banner {
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}
/* Limit the width of the tray to 30px to make it stack vertically*/
#enjin-tray {
max-width: 30px;
margin: 0;
bottom: 175px;
}
#enjin-tray li#notificationpanel {
border-radius: 3px;
}
#enjin-tray ul li.tray-item {
border-style: solid;
border-width: 1px;
}
#notificationpanel .notification-icon.apps {
background-position: -84px 3px;
}
#notificationpanel .notification-icon.general {
background-position: -54px 3px;
}
#notificationpanel .notification-icon.messages {
background-position: -25px 3px;
}
#notificationpanel .notification-icon.dashboard {
display: none;
}
#enjin-tray li#notificationpanel .subpanel {
width: 380px;
bottom: 0;
}
#enjin-tray #notificationpanel .subpanel.general {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.messages {
right: 40px;
}
#enjin-tray .subpanel {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {
display: none;
}
#messages-notification-tip {
bottom: 231px !important;
right: 35px !important;
}
#general-notification-tip {
bottom: 205px !important;
right: 35px !important;
}
#apps-notification-tip {
bottom: 180px !important;
right: 35px !important;
}
.triangle {
display: none;
}
#enjin-tray-messaging {
display: none;
}
</style>
</head>
<body>
<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
<div id="page-wrap">
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<div style="clear:both;"></div>
</div>
</body>
Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.
What version of IE are you using? Your page looks fine on IE10.
I can't help you if you are running an older version, but have a look at this :
Imitate CSS3 transition in IE?
-webkit-transition won't work on IE.
I have created an unordered list inside a div which is absolutely positioned. When I add an href inside of the li items, it's not working.
For example: <li>Home</li> is still not clickable.
Here is the CSS (the nav is the wrapping div):
#nav
{
background:#666666;
position:absolute;
top: 270px;
left:150px;
height:40px;
}
#nav ul li
{
position:relative;
top:-8px;
left: -15px;
display:inline;
padding: 0 33px;
font-size:14px;
border-right: 2px solid #333333;
margin:auto;
color: #efefef;
}
Here's the full code. I also figured out that some other element is overlapping, but don't know what to do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Good Brothers Film Entertainment</title>
<link rel="stylesheet" href="css/default.css" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/logo2.png" id="logo2"/>
<img src="images/logo.png"/>
</div>
<div id="nav">
<ul>
<li><span>H</span>OME</li>
<li><span>S</span>ERVICES</li>
<li><span>R</span>EELS</li>
<li><span>G</span>ALLERY</li>
<li><span>A</span>BOUT US</li>
<li><span>C</span>ONTACTS</li>
<li><span>A</span>FFILIATES</li>
</ul>
</div>
</div>
<img src="images/inner-background.png" id="inner-background" />
<p id="welcome">~<span>W</span>ELCOME~</p>
<img src="images/good-brother.png" id="good-brother"/>
<img src="images/working-together.png" class="work-together" />
<img src="images/and.png" class="work-together" />
<img src="images/exceeding-limits.png" class="work-together" />
<img src="images/men.png" class="men" />
<img src="images/men-shadow.png" class="men" />
<img src="images/footer.png" id="footer" />
<div id="video">
<!-- <iframe width="560" height="315" src="http://www.youtube.com/embed/V0LQnQSrC-g" frameborder="0" allowfullscreen></iframe> -->
</div>
</body>
</html>
The CSS
body,html{margin:0;border:0;padding:0;}
#container
{
width:1360px;
height:1024px;
background:url(../images/background.png);
}
#logo2
{
position:absolute;
}
#nav
{
background:#666666;
position:absolute;
top: 270px;
left:150px;
height:40px;
}
#nav ul li
{
position:relative;
top:-8px;
left: -15px;
display:inline;
padding: 0 33px;
font-size:14px;
border-right: 2px solid #333333;
margin:auto;
color: #efefef;
}
#nav li span
{
font-size: 21px;
}
#nav li:last-child
{
border:none;
}
#inner-background
{
position:absolute;
top: 0px;
}
#welcome
{
color:#ffffff;
top:300px;
left:300px;
font-weight:bold;
font-size:24px;
position:absolute;
}
#welcome span
{
font-size: 28px;
}
#good-brother
{
top:1px;
position:absolute;
}
.work-together
{
top: -5px;
position:absolute;
}
#video
{
top: 400px;
left:600px;
height:315px;
width:560px;
background: #eeeeee;
position: absolute;
}
.men,#footer
{
top:1px;
position: absolute;
}
Depending on your layout, you can use z-index set to a high enough value allowing the anchor tags to overcome the overlapping element.
Still work with the complete code, but with no images.
I suspect that your problem is the #footer image
(I can confirm it is if the image is over 300 pixel high!)
Here's why :
.men,#footer
{
top:1px;
position: absolute;
}
Since this image is defined after, it's put on top. It's either that image or another one big enough to cover your header.
This css declaration could help find if an image is the culprit :
img {border:3px solid red !important;}
If you have firebug or other similar developpement tool, right click on your link and do inspect element : if you have an element over it, it should be selected.
Note : if you dont have firebug or something similar... Get one asap.