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
Related
I have this layout (which is a header):
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color: aqua; height: 160px;">
<img src="logo.png" class="img-responsive logo">
</div>
<div class="col-sm-8" style="background-color: blueviolet; height: 160px;"></div>
<div class="col-sm-2" style="background-color: aqua; height: 160px;"></div>
</div>
</div>
what i would like to achieve is:
Align the logo to the bottom and the center
Let the image be responsible (set width to 80% of the column)
I did this:
.logo {
position: absolute;
width: 80%;
left: 10%;
right: 10%;
bottom: 0;
}
but it somehow dosen't work as you can see here:
https://jsfiddle.net/9kauhbhs/2/
Use left: 50% and a margin left that is negative half of the image width.
e.g.
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}
Fiddle
You can try this..
https://jsfiddle.net/9kauhbhs/7/
.container{
position:absolute;
bottom:0px;
height:auto;
width:100%;
text-align:center;
}
.logo {
position: relative;
width: auto;
height:auto;
margin:0 auto;
max-height:100%;
vertical-align:bottom;
}
<div class="col-sm-2 text-center" style="background-color: aqua; height: 160px;">
<div class="container">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" class="logo">
</div>
</div>
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;
}
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300"
height="437" /></a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div><br />
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437"
/>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
</body>
</html>
</body>
</html>
I am trying to align the two div images horizontally.
I borrowed the code for overlaying text on images from this website :
I just added a random pic and text to see if this code works, It works like perfectly well, but they come out vertically. How do I align them horizontally ? Will appreciate any help.
If I understood your problem, you need to have both images side by side. If so, you need to adjust your CSS and HTML to allow that:
See this working Fiddle Example!
HTML
<div class="imageSub" style="width: 300px;">
<a href="../../../Downloads/Unnamed Site 2/stem studio.html">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
</a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
<div class="imageSub" style="width: 300px;">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
Removed the <br>
CSS
div.imageSub {
position: relative;
float: left;
}
div.imageSub img {
z-index: 1;
}
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
Added float: left; to the div.imageSub
EDITED
A working Fiddle Example based on the previous fix, adapted for a 3x2 visual presentation.
Remove the <br/>
Add css rules
.imageSub { float: left;}
.clear { clear: both; }
Add <div class="clear"/> to the end.
Don't forget step 3 in floating environments.
jsfiddle
Here's simple a 2 x 3 div solution using floats: http://jsfiddle.net/Fb6Jk/
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>
here's my code:
<div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->">
<ul id="banner_ul">
<li id="wrm"><i>The homepage of White Root Media!</i></li>
<li id="google"><i>+1 us on Google!</i></li>
<li id="facebook"><i>Like us on Facebook!</i></li>
<li id="twitter"><i>Tweet about us on Twitter!</i></li>
</ul>
</div>
<div id="container" style="<!-- border:solid yellow 1px -->; display: table;">
<div id="content" style="padding-top:90px; display:table-cell; min-width:945px; <!-- width:100% - 270px; -->">
This content will determine the height
</div>
<div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div>
</div>
<div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div>
here's the live page:
http://whiterootmedia.com/test/test4/
I would like the content div that is display:table-cell to go the full width of the page minus 270px. The tree should be all the way to the right.
Any help is greatly appreciated!
Thanks,
Dusty
You can use absolute positioning in the child div's
#foo {
display: table;
height: 400px;
position: relative;
width: 500px;
}
#foo > div {
display: table-cell;
height: 100%;
position: absolute;
}
#left {
background: blue;
left: 0;
right: 200px;
}
#right {
background: green;
right: 0;
width: 200px;
}
click here for demo
there are other methods of achieving the same effect such as changing the margins, I personally prefer the method above