I have a image gallery of the following structure :
<div class="gallery">
<div class="message">
Welcome to gallery
</div>
<img src="http://placehold.it/300x300" />
</div>
And the CSS :
.message {
position:absolute;
left:10px;
top:20px;
height:30px;
width:140px;
background:#333;
}
.gallery img {
opacity:.85;
}
But this causes the div message also transparent ! How to prevent it and whats the reason for transparency ?
DEMO
It seems the image is on top of the message div. I just swapped them over like this:
<img src="http://placehold.it/300x300" />
<div class="message">
Welcome to image gallery
</div>
And that fixed it for me.
fiddle
Another way is to give the message a z-index like this:
.message {
position:absolute;
left:150px;
top:20px;
height:30px;
width:140px;
background:#333;
z-index: 2;
}
.gallery img {
opacity:.85;
}
fiddle
You could give the image an id so only the image's opacity is lower
#img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />
Or you could use a class
.img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />
So then your could would be something like this:
<div class="gallery">
<div class="message">
Welcome to image gallery
</div>
<img src="http://placehold.it/300x300" class="img"/>
</div>
#img{ opacity: 85%; }
.img{ opacity: 85%; }
.message {
position:absolute;
left:10px;
top:20px;
height:30px;
width:140px;
background:#333;
}
Hope this helps you!
Demo
Related
I need to cut an image in Photoshop and to recompose it. I thought to create a table / div-table where put the pieces of the partitioned image.
I have done this:
<div id="Table">
<div id="row">
<div id="col">
<img src="01.png" alt="">
</div>
<div id="col">
<img src="02.png" alt="">
</div>
<div id="col">
<img src="03.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="04.png" alt="">
</div>
<div id="col">
<img src="05.png" alt="">
</div>
<div id="col">
<img src="06.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="07.png" alt="">
</div>
<div id="col">
<img src="08.png" alt="">
</div>
<div id="col">
<img src="09.png" alt="">
</div>
</div>
</div>
with Css:
<style type="text/css">
<!--
img {
width: 100%;
height: auto;
}
#Table {
display: table;
width: 50%;
}
#row {
display: table-row;
}
#col {
display:table-cell;
}
-->
</style>
UPDATE:
I have to add in the middle (img 5) a table with the items, the quantity and the price. I have updated the fiddle. There are some problems in the fiddle but here there are the link with the screenshot of my page.
https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0
JSFIDDLE:
http://jsfiddle.net/wdb5gq29/43/
I'm working on a similar project (responsive image map), and I found positioned divs placed over a single image to be much more stable.
It has the added advantage of being used as an image map, because you can put content in or add functionality to the 9 divs, use more or less divs, and there are no alignment issues because it uses one image versus multiple sliced images. An awesome example is the responsive image map at CSS Play: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Here is the code for an example similar to yours.
JSFiddle
HTML
<div id="wrapper">
<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>
</div>
(Note: The CSS is written out in long form as an example for easier use. It would be shortened down on a live site by combining the similar styles.)
html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
#wrapper {
height:100%;
width:100%;
}
.image-holder {
width:50%;
position:relative;
}
.image-background {
width:100%;
display:block;
}
.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}
Remember to add !DOCTYPE html, or IE will have issues. Also, the div widths are set at 33% with a border to highlight the structure. On the live version, you'll delete the borders and try setting the horizontal divs to 33.333%, equaling to 100%. Or 33% 34% 33%.
For your original CSS table layout, you can add the following additional CSS to stabilize the table and remove the default bottom gap under the images, and it worked in Firefox and Explorer, but showed the odd gap or alignment issues in other browsers at various screen sizes.
.table {
display:table;
width:50%;
margin:0;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
}
.col {
display:table-cell;
border:none;
}
.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}
Updated Redesign Using a Flexable Image Background
According to your latest Fiddle, it looks like you would like to display a data table, with the printer image as a background. The JSFiddle example below has a flexible container div set at the requested 50%. Within the container is the data table, and an absolutely positioned printer image that scales, and serves as the background.
JSFiddle
.price-container {
position:relative;
padding:0;
display:table;
width:50%;
}
.image-bg {
display:block;
position:absolute;
top:0;
left:0;
min-height:100%;
/* min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
width:100%;
height:auto;
margin:0;
padding:0;
z-index:-1;
}
.table-holder {
z-index:2;
padding:2em;
/* min-width:300px; */
}
.printer-display-table {
width:100%;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
font-family:verdana;
font-size:.6em;
}
.printer-display-table td {
border:solid 1px #000000;
padding:.5em;
}
HTML
<div class="price-container">
<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
<div class="table-holder">
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
</div>
Add display: block and remove width from your img tag to get rid of the cellspacing:
img {
display: block;
height: auto;
}
updated fiddle: http://jsfiddle.net/wdb5gq29/42/
I'm trying to create something that will allow me to put something on top of images in this case, small images.
basically, it goes like this and both main divs are centered:
http://jsmith.elementfx.com/images/questions.png
tia.
Sorry, here is
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="rightimage"><h2>434</h2></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
}
#right {
margin-right:15px;
}
#rightimage{
position:absolute;
padding-top:2px;
width:65px;
}
you have to use z-index and position to acheive it,
DEMO
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><div id="rightimage"><h2>434</h2></div><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
z-index:1;
}
#right {
position:relative;
margin-right:15px;
}
#rightimage{
margin-left:175px;
position:absolute;
z-index:1000;
}
use this code, the calculation of the width and height of images would be according to your images:
HTML
<div class="container">
<div class="img1">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
<div class="img2">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
</div>
CSS
.container{
width:270px;
margin:0 auto;
overflow:hidden;
}
.img1,.img2{
width:128px;
height:128px;
background:url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png);
float:left;
margin-right:10px;
border:1px solid #000;
}
.img2{margin:0;}
DEMO jsfiddle for this
Demo Fiddle - Quad view with 3 layered images
<div class="container start">
<img src="http://www.placehold.it/300/555555"></img>
<div id="base1" class="base">
<img src="http://www.placehold.it/200/654321"></img>
<div id="overlay1" class="overlay">
<img src="http://www.placehold.it/100/123456"></img>
</div>
</div>
</div>
.base {
width: 200px;
height: 200px;
position: relative;
top: -290px;
left: 10px;
}
.overlay {
width:100px;
height:100px;
position: relative;
left: 10px;
top: -190px;
}
.container {
left:100px;
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
.start {
clear: left;
}
HTML
<div id="container">
<div id="first">Some text in the first div</div>
<div id="second"><input type="text" value="Some text in the input" /></div>
</div>
</div>
CSS
#first{
width:100px;
background:red;
float:left;
}
#second{
background:blue;
}
#container{
overflow:hidden;
}
#container:after{
clear:both;
content:"";
height:0px;
width:0px;
visibility: hidden;
}
Fiddle: http://jsfiddle.net/6GBts/2/
You might want this
#second{
background:blue;
overflow:hidden
}
input{
width:100%
}
Js Fiddle Demo
I'm trying to overlay a white circle on top of an image once it is hovered over, however this is trickier than I thought using just CSS. The solution doesn't need to be a strictly CSS one, it's just that I wouldn't like to use images.
HTML/ERB
<div class="item-container">
<div class="rollover-item">
<%= link_to image_tag(#featured_product_first.product.images.order(:placement).first.image.url(:medium)), #featured_product_first.product %>
</div>
<%= link_to #featured_product_first.product.name, #featured_product_first.product %>
<% end %>
</div>
CSS
.item-container {
width: 100%;
height: 100%;
}
.rollover-item {
position: relative;
z-index: 1;
}
.rollover-info img:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255,255,255,.5);
border-radius: 50%;
z-index: 10;
}
Assuming this structure
JSFiddle Demo
HTML
<div class="item-container">
<div class="rollover-item">
<img class="product-img" src="http://lorempixel.com/output/technics-q-c-200-200-7.jpg" alt=""/>
<a class="description" href="#">Product Description</a>
</div>
</div>
Then this general CSS should work. Using overflow hidden, absolute positioning and transitioning.
.item.container {
display:inline-block;
}
.rollover-item {
position:relative;
overflow:hidden;
width:200px;
}
.description{
position:absolute;
top:100%;
left:0;
display:block;
width:200px; /* as image */
height:200px; /* as image */
line-height:200px; /* as image */
text-align:center;
text-decoration:none;
color:black;
font-weight:bold;
background:rgba(255,255,255,0.5);
border-radius:50%;
transition:top 0.5s ease;
}
.rollover-item:hover .description {
top:0;
}
look at this example:
html:
<div class="item_cont">
<img src="img_src.jpg" />
<div class="circ"></div>
</div>
css:
.item_cont{width:100px;height:100px;}
.item_cont img{width:100px;height:100px;}
.item_cont .circ{display:none;background:#fff;width:80px;height:80px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}
.item_cont:hover .circ{display:block;}
no js needed.
hope that helps.
use this code:
jsFiddle is here
HTML:
<div class="item-container">
<div class="rollover-item">
</div>
</div>
CSS:
.item-container{
position:relative;
width:200px;
height:200px;
background:tomato; /* I love this color */
}
.rollover-item{
position:aboslute;
width:0%;
height:0%;
margin:0 auto;
background:#fff;
border-radius:50%;
opacity:0;
transition:all 0.5s ease;
}
.item-container:hover .rollover-item{
width:100%;
height:100%;
opacity:1;
}
I'm trying to get my elements centered in one block like this www.spookycraft.net But I haven't been able to figure it out. My code: http://jsfiddle.net/7PP9K/1/
raw code:
<! DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'>
<title> Wandercraft Network </title>
<style media="screen" type="text/css">
.slide-up-boxes a{
display:block;
width:300px;
height:300px;
background: #eee;
border: 1px solid #ccc;
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:auto;
}
</style>
</head>
<body>
<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>
</div>
<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 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 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>
</div>
</body>
</html>
I'll be updating this post if I find an answer thank you for reading.
I have updated your jsfiddle.
I've closed the sections and added some CSS to allow for the same presentation as the spookycraft website.
Have a look at this:
http://jsfiddle.net/7PP9K/4/
The key changes:
body{
width:960px;
}
#page-wrap{
width:620px;
margin:0 auto;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
edit: wrong jsfiddle link, now updated
The trick to center positioning block elements is
margin: 0 auto;
Just add that to your anchor css (.slide-up-boxes a) or whatever element you want centered and it should work. Make sure it has a fixed width too.
Give the parent a fixed width and center it by automated margins:
#page-wrap {
width:300px;
margin:0 auto;
}
Fiddle sample
CSS :
.slide-up-boxes a {
float:left; // changes made
display:block;
width:300px;
height:300px;
background: #eee;
border: 1px solid #ccc;
overflow:hidden;
}
#page-wrap{
width:620px;
margin:0 auto;
}
body{
width:1200px;
}
DEMO