This is my first time trying an overlay. It is somewhat working however, hovering the first image would overlay below.. I tried making the position absolute, but that means that overlay would stay at top.
<div class="galleryContainer">
<div class="row">
<div class="galleryItem">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Gold-jewellery-jewel-henry-designs-terabass.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://3.bp.blogspot.com/_HEjoNp_qRz8/TSsQZNyVFUI/AAAAAAAAJhI/xc7MCnnNYZY/s1600/World%2527s+Most+Funniest+Animals+Photos+%25288%2529.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
</div>
<div class="row">
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-19.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-18.jpg"/>
<div class="imgCaption">
<p>yaw</p>
</div>
</div>
</div>
</div>
css:
.row {
margin:2%;
}
.row .galleryItem {
float: left;
padding-right: 5%;
width:300px;
height:350px;
}
.row .galleryItem img {
width:280px;
height:330px;
padding:0;
margin:0;
}
.row .galleryItem .imgCaption {
top: 0px;
width:300px;
height:350px;
background:#FF2400;
opacity:0;
}
.row .galleryItem .imgCaption p {
color:white;
font-weight: 400;
font-size:16px;
text-align: center;
}
.row .galleryItem:hover .imgCaption {
opacity: 0.7;
}
.galleryContainer {
margin: auto;
max-width: 900px;
}
Here is a jsfiddle I made that demonstrates the issue. Any help would be appreciated.
Your problem is that your caption is positioned wrongly. It can be finished by adding float:left; to your img.
Here's a fiddle.
EDIT:
Other changes:
The caption div didn't fade properly so I switched the show up method from, opacity:0 -> opacity: 0.7;, to display:none -> display: block.
I removed the margins and paddings from the <p> element since it appeared displaced.
Related
I'm trying to create a navigation bar. The background consists of an image, and I'm using text placeholders until I have the links sorted. I cannot seem to get the text to appear on the navigation bar, rather they insist on appearing below in a list style.
An example:
The grey gradiented bar is intended to be the navigation bar.
HTML:
<div id="pagewrapper">
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center">
<div id="pagebanner">
<img src="img/banner.png" />
</div>
<div id="navibar">
<img src="img/navibar.png">
<div class="naviitems">
Home
</div>
<div class="naviitems">
PHolder1
</div>
<div class="naviitems">
PHolder2
</div>
<div class="naviitems">
PHolder3
</div>
<div class="naviitems">
Contact Us
</div>
</img>
</div>
<div id="pagecontent">
<h1>Oh no, I broke my elephant!</h1>
<p>Wiggle!</p>
</div>
</div>
</div>
And the corresponding CSS:
#container{
margin: 0 auto;
width:1017px;
text-align:center;
}
#left{
float:left;
width:160px;
height:900px;
background-color: #D8D8D8;
}
#right{
float:right;
width:160px;
height:900px;
background-color: #D8D8D8;
}
#center{
display: inline-block;
margin:0 auto;
width: 697px;
}
#pagebanner{
display: inline-block;
margin:0 auto;
width: 697px;
}
#navibar{
display: inline-block;
margin:0 auto;
width: 697px;
height: 27px;
}
.naviitems{
margin: 0 auto;
height:25px;
width:20%;
}
#pagecontent{
display: inline-block;
margin:0 auto;
width: 697px;
}
You need to set the background property of the parent DIV to the image instead of calling it using an IMG tag.
.navibar {
background:url(URLofImage)
}
I used
background: linear-gradient(180deg, #777, #eee);
instead of a background image, see if it fits your needs... jsfiddle
I have just started putting my site together. I have a scrolling banner DIV and now i want to add a an image underneath 'largemenubutton' DIV but when I place it just sits on top of my banner? I have put in the CSS to clear:left however this does not work.
html
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
</div>
css
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
clear:left;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
clear:left;
}
JSFIDDLE here
http://jsfiddle.net/cX8Z9/
The problem is that there is an extra </div> after the bluebar, so the largemenubutton is not inside the same container mainimage, which is positioned absolutely (so the largemenubutton is just sitting where it would sit if the mainimage hadn't been there at all).
<div class="bluebar"></div></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
And you can't "clear" an absolute positioning the way you can a float.
So the solution is to move the offending </div> two lines down, thus putting the largemenubutton inside the mainmenu.
<div class="bluebar"></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
</div>
See jsFiddle.
I want the input to be width: 100%; and be on the right of the image.
Is it possible without using a table? If it is how can I achieve that?
HTML:
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<input/>
</div>
CSS:
input {
width:100%;
float:left;
}
FIDDLE
Thank you
You could do this with calc()
FIDDLE
input
{
width: calc(100% - 130px); /* width of img + extra padding between */
}
You could also align the input by styling the img
img
{
vertical-align: middle; /* or top /bottom.. etc */
}
Demo: http://jsfiddle.net/abhitalks/DL8kG/9/
Idea:
Wrap your image and input in their own containers. Use display: table-cell on containers. Use vertical-align: middle to line up. This will allow you to have 100% width.
Markup:
<div class="wrapper">
<div class="imgWrap">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div class="inputWrap">
<input/>
</div>
</div>
CSS:
div.wrapper {
width: 100%;
}
.imgWrap {
display: table-cell;
}
.inputWrap {
display: table-cell;
width: 100%;
vertical-align: middle;
padding: 4px;
}
input {
width: 100%;
}
Use a floating and overflow trick. Float your image to the left and place your input in a container that will have its overflow hidden. Give the input a width of 100%. The input's container will take up the remainder of the screen (what I assume you mean by 100%):
HTML
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<div class="inp"><input/></div>
</div>
CSS
img{
float:left;
}
.inp{
overflow:hidden;
background:#F00;
}
.inp input{
width:100%;
}
JSFiddle
Please take note of how your default styles (padding, border..) will affect the total width of the input.
<div class="wrapper">
<div id="img">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div id="input">
<input/>
</div>
</div>
CSS
#input {
display:table-cell;
}
input{
width:100%;
float:left;
}
#img {
width:130px;
float:left;
border:1px solid black;
display:table-cell;
}
Fiddle
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" style="float:left"/>
<div style="float:left">
<input />
</div>
I want to center these 4 images. Horizontally it is working but vertically it won't work. Does anybody knows how to solve this problem? At the moment I've got a black header/footer section with 4 images centered horizontally. Everything is scalable but not the height of the images.
Am doing it right?
HTML:
<section>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</section>
CSS:
body {
margin:0;
padding:0;
max-width: 100%;
max-height:100%;
}
section {
position:absolute;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
width:12.5%;
float:left;
margin-left:10%;
}
Assuming the width of the image equals the height of the image (like the code you gave has), you can just use margin-top of 50% - imageHeight. That would look like
section img {
width:12.5%;
margin-top:32.5%;
float:left;
margin-left:10%;
}
Demo
If they're not, you can use this pure CSS approach
I think its easier to wrap the images in a container and then center the container in the container's parent, in this case you could use an Article tag to wrap the images an then center that article in the section like this
HTML
<section>
<article>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</article>
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
section {
top: 5%;
left: 0%;
width: 100%;
height: 90%;
/* strech */
overflow: hidden;
}
article {
width:80%;
height:40%; /* change this to set height */
/* CSS absolute center begin */
border: 2px solid #0000ff;
margin: auto;
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
left:0;
right:0;
/* CSS absolute center end*/
}
.pic {
position: relative;
float: left;
width: 12.5%;
height: 100%;
margin-left: 10%;
}
.pic img{
position: relative;
width:100%;
height:100%;
}
Hope it help you
You can give the section position:relative; and then do a trick with the images.
The sample below makes them centered of the section, if you want to have the images spread out, but vertically aligned, you need to do this trick on the containing element (like a dive around the images in the section:
section {
position:relative;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
/*width:12.5%;
float:left;
margin-left:10%;*/
position:absolute;
top:50%;
margin-top:-25%;/* should be half the height of the image */
left:50%;
margin-left:-25%;/* should be half the width of the image */
}
I'm building responsive website and have a problem with aligning div.button to align with bottom side of the image.
Here is the code: http://jsfiddle.net/E22nq/
I would like to have div.button aligned with image, and dynamically hide text in div#text so that the width of the div.content is dependent on image (image height depends on the width of the browser).
HTML:
<div class="content">
<div id="left">
<img src="" />
</div>
<div id="right">
<div id="text">...</div>
<div class="button">BUTTON</div>
</div>
</div>
CSS:
.content {
width: 100%;
}
#left {
width:50%;
float:left;
}
#right {
width:50%;
float:left;
}
img {
width:100%;
}
try using
#right {
width:50%;
float:left;
clear:left;
}