I'm trying to get this CSS effect into the middle of all of these boxes, and add a fade just like this site demo's http://dinolatoga.com/demo/webkit-image-hover-effects/ (the bottom right effect) But I don't know how to re-size the effect to fit into these boxes here's happens when I run my code http://jsfiddle.net/TWebQ/
and here's my code:
<! DOCTYPE HTML>
<html>
<head>
<div>
<img src="http://img.photobucket.com/albums/v604/Ema/header-winter-castle-900x200.jpg" class="banner">
</>
</div>
<style media="screen" type="text/css">
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
border:1px solid black;
padding:1px;
}
.spacing{
margin-right:20px;
}
.banner{
margin:0 auto;
display:block;
border:4px solid black;
padding:5px;
}
#one{
position:relative;
}
#one img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#one .detailsone{
opacity: .9;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
padding-right:200px;
}
#one:hover .detailsone{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
padding-right:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box spacing" id="one";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">
</a>
<div class="detailsone">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
<div class="box spacing"id="two";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">
</a>
<div class="detailstwo">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
<div class="box spacing"id="three";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%">
</a>
<div class="detailsthree">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
<div class="box spacing"id="four";><a href="http://www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%" >
</a>
<div class="detailsfour">
<h1 style="color:black"> <u> Enter </u> </h1>
</div>
</div>
</div>
</body>
</html>
Any help would be appreciated, If I find a answer I'll update this thread, Thank you for reading.
First you do have to cleanup your HTML to something like this:
<body>
<div>
<img src="http://img.photobucket.com/albums/v604/Ema/header-winter-castle-900x200.jpg" class="banner"/>
</div>
<div class="container">
<div class="box spacing" id="one">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailsone">
<h1>Enter</h1>
</div>
</div>
<div class="box spacing" id="two">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailstwo">
<h1>Enter</h1>
</div>
</div>
<div class="box spacing" id="three">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailsthree">
<h1>Enter</h1>
</div>
</div>
<div class="box spacing" id="four">
<img src="http://www.wilsoninfo.com/300x300.gif" width="100%"/>
<div class="detailsfour">
<h1>Enter</h1>
</div>
</div>
</div>
</body>
Also, you might want to consider if you do want to use multiple H1 tags without a good reason.
read more about this in the article on-page-seo-multiple-h1-elements on website-in-a-weekend.net/
And if your css is like this it will work:
.container{
overflow:hidden;
width:450px;
margin:0 auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
border:1px solid black;
padding:1px;
}
.spacing{
margin-right:20px;
}
.banner{
margin:0 auto;
display:block;
border:4px solid black;
padding:5px;
}
#one{
position:relative;
height:200px;
width:200px;
}
#one img{
position:absolute;
top:0;
left:0;
z-index:0;
}
.box h1{
color:black;
}
#one .detailsone{
height:200px;
width:200px;
opacity: .9;
position:absolute;
text-align:center;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
#one:hover .detailsone{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
See it in action on this jsFiddle: http://jsfiddle.net/jwvanveelen/KW5Uh/
Related
My goal is to have a container that fills up it's parent with some padding like you see in the blow snippet. Right now the only way I could figure out how to accomplish this is with calc(). And since calc technically has a better browser support then flex, I'd like to stay away from that.
Can anyone see a way to accomplish this without javascript and with calc()?
Assume that all width's are percentages.
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
width:calc(100% - 20px);
height:calc(100% - 20px);
left:10px;
top:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
Simply use top/left like you did and right/bottom
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:10px;
bottom:10px;
left:10px;
top:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
You can also consider margin too:
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:0;
bottom:0;
left:0;
top:0;
margin:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
how can i achieve the attached layout
using html, bootstrap, CSS
where the circles will contains an images
and a detail box will be beside them
question has been updated with code snippet
what i have done is not accurate the sizes not responsive
and if i make the circle bigger than the rectangle it does not align vertically in middle
also the code inside the rectangle is not middle
could any one please provide me a demo
custom layout
.rectangle1{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle1{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.rectangle1{
display: inline-block;
height: 100px;
width: 100%;
background: #6f0a18;
position: relative;
}
.circle1{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.circle2{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
right:0%;
margin-right:-25px;
top: 0px;
background:red;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="rectangle1">
<img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-left: 100px;">Title</h3>
<p style="padding-left: 100px;"> Sub Title</p>
</div>
</div>
<div class="col-md-6">
<div class="rectangle1">
<img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-right: 100px; text-align: right;">Title</h3>
<p style="padding-right: 100px; text-align: right;"> Sub Title</p>
</div>
</div>
</div>
</div>
.outer-wrapp {
padding:30px;
}
ul {
list-style:none;
padding:0;
}
ul li {
margin: 55px 0px;
}
.wrapp{
padding:0px 15px;
}
.left .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-left: 5%;
padding-left: 20%;
}
.left .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
left: -37.5px;
}
.right .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-right: 5%;
padding-right: 20%;
}
.right .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
right: -37.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapp">
<div class="row">
<div class="col-xs-6 col-sm-6">
<ul class="left">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
<span>Text</span>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<ul class="right">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Try this. it works for you.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
}
#id1 {
border: 1px solid black;
padding: 11px;
margin: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>Circle CSS</h2>
<div class="circle"><div id='id1'> text here</div></div>
</body>
</html>
try this
.container{
width:100%;
background:red;
margin:10px 0;
}
#image{
width:20%;
float:left;
}
#image img{
border-radius: 50px;
}
#text{
width:80%;
float:left;
}
#text h3{
padding:10px;
}
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
i am beginner to css.
i want to make new div into new line like this,
i try my code like this
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
but result like this
how to move, the second image to new line..
pls anybody help me. i ll appreciate your answer
div{
/*display:inline-block;*/ /* deleted */
/*float:left;*/ /* deleted */
color:#fff;
font-size:20px;
}
.some {
margin-bottom: 10px; /* new */
}
.one{
float: left; /* new */
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
separate each block ( here i added a div with class name some )
and as you want one side .one and another side .three so just add float:left; on .one
you can use something like this.
.box-wrapper {
border: 1px solid #000;
width: 100%;
display: block;
position: relative;
}
.box-wrapper:before, .box-wrapper:after{
clear:both;
display:table;
content:"";
}
.box-tall {
width: 50%;
background:#ded9d9;
height: 200px;
float: left;
}
.box-left {
width: 50%;
float: left;
}
.box-1 {
background: #8f8fde;
height: 100px;
}
.box-2 {
background: #d2c47a;
height: 100px;
}
<div class="box-wrapper">
<div class="box-tall">
tall
</div>
<div class="box-left">
<div class="box-1">top</div>
<div class="box-2">bottom</div>
</div>
</div>
You should add clear:both or clear:left to make the div to be displayed in the new line
Try the following code after style tag
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<br>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<br>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
I think this is what you want to do
Hope it helps
Let me know if you require any further help
You need to clear the float on your .one div.
This is the only part that would change:
CSS:
.one{
width:100px;
height:100px;
background:red;
clear:left;
margin-bottom: 15px;
}
You may want to consider altering your markup as well by wrapping each group of divs, but this will get you what you need.
Fiddle: https://jsfiddle.net/k4dw68pg/
Here is the solution.
try this code out :
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
width:100px;
height:100px;
background:red;
clear:both;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
You can use the below. you were not clearing out your floats.
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="clearfix">
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="clearfix">
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.clearfix{
clear:both;
}
.one{
width:100px;
height:100px;
background:red;
margin-bottom:20px;
display:block !important;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
You can add a div to wrap your group of image/name/desc and then set clear: both; to this div:
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.image-wrapper {
clear: both;
margin-bottom: 20px;
}
.one{
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
So I'm trying to make a image gallery only with css.
I want the text div to cover all of my "background-image" when I pass the cursor on it.
Right now the background of text does not cover it totally.
Any help is appreciated.
<!doctype html>
<head>
<meta charset="UTF-8">
</head>
<style>
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#mainWrapper{
width:100%;
}
.contentor{
display:block;
width:33.3%;
height:auto;
position:relative;
margin:0;
float:left;
}
.imagem{
display:block;
position:relative;
width:100%;
height:auto;
left:0;
top:0;
}
.texto{
display:block;
z-index:100;
position:absolute;
font-size: 3em;
font-weight:bold;
left:50%;
top:35%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
background: rgba(153, 102, 0, 0.6);
transition: opacity 2s; /* efeito trans */
opacity:0;
}
.contentor:hover .texto{
opacity:1;
}
}
</style>
<div class="contentor">
<img class="imagem" src="IMGS/index_amb.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_fuller.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_ft_rain.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_manual.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_pecados.jpg"/>
<p class="texto">texto por cima</p>
</div>
<div class="contentor">
<img class="imagem" src="IMGS/index_e_r.jpg"/>
<p class="texto">texto por cima</p>
</div>
</div>
Have a look at jQuerys hover() and mouse over() methods.
Sorry. I haven't tested this but I would think that you would need to set the CSS element to .hidden and then use the mouseenter, mouseover event to reset the CSS.
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)