I make 2 divs with different images next to each other.
One will be called "Land" and the other "Property".
On hover, I want to expend the width (From 50% to 75%) of the hovered div.
I managed to make it work with the left div but not with the right div.
How ? Why? Been tying a lot of things without success.
<body>
<div class="container-fluid">
<div class="size" id="proprety">
<h1>Propreties</h1>
<p>The best of the proprety</p>
</div>
<div class="size" id="land">
<h1>Land</h1>
<p>The best of the proprety</p>
</div>
</div>
</body>
.size{
height:600px;
overflow:hidden;
-webkit-transition: width .2s;
float:left;
background-repeat:no-repeat;
}
.borders{
padding:10%;
}
#proprety{
background-image:url(proprety.jpg);
width:50%;
}
#land{
background-image:url(land.jpg);
-webkit-transition: width .2s;
width:50%;
}
#proprety:hover{
width:75%;
}
#proprety:hover + #land{
width:25%;
}
#land:hover{
width:75%;
}
#land:hover + #proprety{
width:25%;
}
So far:
https://jsfiddle.net/Chloe75/akbqxc2v/
Short answer: the element+element selector only works for forward elements, and not backwards like you used in
#land:hover + #proprety{
width:25%;
}
Since #land comes after #proprety, it won't work like you want it to.
You can emulate this using flexbox like:
.size{
height:200px;
overflow:hidden;
-webkit-transition: width .2s;
float:left;
background-repeat:no-repeat;
}
.borders{
padding:10%;
}
#proprety{
background-color:blue;
width:50%;
}
#land{
background-color:green;
width:50%;
}
#proprety:hover, #land:hover{
width:75%;
}
div.container-fluid {
display: flex;
}
<body>
<div class="container-fluid">
<div class="size" id="proprety">
<h1>Propreties</h1>
<p>The best of the proprety</p>
</div>
<div class="size" id="land">
<h1>Land</h1>
<p>The best of the proprety</p>
</div>
</div>
</body>
Related
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
I have two divs at the moment that I'm wanting to float on left and right sides however they are both kinda sticking to each other and can't seperate them..
html:
<nav>
<div id="nav_content">
<div id="home_icon" />
<div id="search_icon" />
</div>
</nav>
So I'm trying to float the home_icon to left and search_icon to right:
CSS
nav
{
background:white no-repeat;
width:75%;
height:5em;
margin-left:8em;
}
#nav_content
{
width:100%;
height:100%;
clear:both;
position:relative;
display:inline-block;
float:left;
}
#home_icon
{
background:url(../images/home.png) no-repeat;
width:50px;
height:50px;
top:50%;
position:relative;
transform: translateY(-50%);
transition:ease-in-out 0.5s;
margin-left:1em;
float:left;
display:inline-block;
}
#search_icon
{
background:url(../images/searchicon.png) no-repeat;
width:40px;
height:40px;
top:50%;
transform:translateY(-50%);
transition:ease-in-out 0.5s;
float:right;
display:inline-block;
position:relative;
}
You can't do
<div id="home_icon" />
<div id="search_icon" />
in HTML 5. Because it means the same as
<div id="home_icon">
<div id="search_icon">
which makes the browser think that #search_icon is inside #home_icon.
So, either set the DocType to XHTML or close the divs properly.
Related Question - Are (non-void) self-closing tags valid in HTML5?
jsFiddle - http://jsfiddle.net/9vd01zx5/
You are using wrong HTML closing tags
use:
<div id="home_icon">Left</div>
<div id="search_icon">Right</div>
Remove the text left and right later..
I'm trying to create a group of divs that are to be perfectly fluid squares, resizable with the viewport.
Here's the HTML structure:
<div id="container">
<div id="row">
<div class="cell A1">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">MIKEY
<br/>
<p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div>
</div>
<div class="cell A2">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">ERIC
<br/>
<p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div>
</div>
<div class="cell A3">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">MIKEY
<br/>
<p>EPHEMERA</p>DIGITAL COLLAGE</div>
</div>
<div class="cell A4">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">ERIC
<br/>
<p>REJJIE SNOW</p>SITE DESIGN</div>
</div>
</div>
The img class="spacer" image is a blank square png intended to 'stretch out' a div to prevent it from being 0x0.
Here's some CSS. I've included a little extra because I'm not sure exactly what's causing it.. I believe it's the :before elements.
.A1, .A2, .A3, .A4 {
position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
content:"";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-filter .2s ease-in-out;
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(90%) brightness(30%);
/* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
.A1:before {
background-image:url('spindrift.jpg');
background-size:cover;
}
.A2:before {
background-image:url('daynnite.jpg');
background-size:cover;
}
.A3:before {
background-image:url('');
background-size:cover;
}
.A4:before {
background-image:url('');
background-size:cover;
}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before {
-webkit-filter:none;
}
/* text hover */
div.cell:hover #text {
opacity:0;
}
#text {
opacity:1;
display:table;
position:absolute;
z-index:999;
color:#ffffff;
text-align:center;
width:100%;
top:44%;
left:0;
text-decoration:none;
}
p {
font:16px ProximaNovaBold, sans serif;
margin:0;
padding:1 0 1 0;
}
/* table rules */
#container {
display:table-row;
width:100%;
}
#row {
display:table-row;
width:100%;
}
.cell {
position:relative;
display:table-cell;
width:700px;
height:auto;
}
html {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
background-color:black;
color:black;
}
/* image SPACER rules */
img {
max-height:600px;
max-width:100%;
height:auto;
width:100%;
z-index:2;
}
I'm using some webkit filters over the background images of these divs, and I don't want these filters affecting the child text so I MUST use the :before indicator. Here's a fiddle
http://jsfiddle.net/QC28s/2/
They are blank(with no background images) right now, it shouldn't matter. If you go into developer tools and look at the divs, the spacer is behaving correctly as it forces each square to 209x209. However if you look at the :before indicator directly before it on the HTML you can see that it(:before) is putting a small 6px margin on the bottom of the squares, making them 209x215. That's what my problem is... Much appreciated.
Explanation :
The :before element has position:absolute; so it can't expand it's parent. The problem doesn't come fro there.
The issue is the whitespace created by the images. Images are inline elements they add white-space just after them (like inline-block elements).
Solution :
Add display:block; to the image tag so they are not inline elements anymore and don't add white-space.
See this FIDDLE
Btw you might be intersted in this question
I am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.
But I couldn't do this. Below the codes I used.
When I hover on this circle, the above two divs should appear like that
<head>
<title>CSS Hovering Effect Practical Class</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#4485F5;
margin:10px 0;
padding:30px;
text-align:center;
}
h1 {
color:#fff;
letter-spacing:2px;
font-size:50px;
margin-bottom:15px;
}
p {
color:#fff;
background:#944E90;
width:600px;
font-size:25px;
padding:3px;
margin:auto;
}
span {
font-style:italic;
}
#features {
margin: 25px 0;
}
#baloon {
color:#ddd;
margin:auto;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:url('bg.png') repeat;
width:200px;
position:relative;
border-radius:5px;
}
#blackarrow {
background:url('blackarrow.png') no-repeat top center;
margin:auto;
height:15px;
width:15px;
margin-top:-7px;
}
#circle {
}
#circle img{
height:50px;
width:50px;
background:#fff;
padding:50px;
border:5px solid #00AEF0;
border-radius:500px;
transition:0.5s ease;
}
#circle img:hover {
height:60px;
width:60px;
background:#ddd;
padding:60px;
border:8px solid #00AEF0;
border-radius:500px;
}
#circle:hover > #baloon {
display: inline;
}
#inner {
}
#img {}
</style>
</head>
<body>
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
<div id="circle"><img src="avatar.gif" /></div>
</div>
</div>
</body>
With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).
You better choose a differently nested structure, to make the hover effect work.
<div id="features">
<div id="circle"></div>
<div id="description">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
</div>
</div>
Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).
#circle:hover + #description {
display:none;
}
Take a look at my minimal example. You only need some fixing to the positioning and you're done.
As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:
#circle:hover ~ #baloon
Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).
As #Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="blackarrow"></div>
<div id="circle">
<div id="baloon">Best web designing services with our team</div>
<img src="avatar.gif" />
</div>
</div>
</div>
This is a doable solution, if you are comfortable changine the structure.
You would change the #balloon styles to something like this:
#baloon {
display:none;
position:absolute;
width:200px;
top:-100px;
left:50%;
margin-left:-115px;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:rgba(0, 0, 0, .5);
border-radius:5px;
color:#ddd;
}
And the #circle & :hover style to this:
#circle {
display:block;
position:relative;
}
#circle:hover > #baloon {
display: block;
}
Let me know if you need any help positioning the balloon.
Here is a working jsfiddle
I have some difficulties working with some CSS/HTML properties. I'm using bootstrap to have good rendering.
So I would like to have this :
The img is perfect but the problem is in the date (02.03.2013). I have put a float left on the img so the h3 works perfectly but not the date.
Could you help me please ? Here is what i have : http://jsbin.com/uqadoc/1/edit
Place a div around the <h3> and the <p> ( your date )
Have the H3 with a fixed width, and a Float:left;
and the p, float:right;
note : ive gone for a non div apreach in the jf but same concept
<div class='main'>
<img src='' class='ims'>
<div class='content'>
<h3 class="qwe" >serwqerqwrewqr</h3>
<p class="wer">dafdf</p>
<div class="rty" >
sfdg
ffffffffffffffffffffff
fdsffffffffffff</br>
sfdg
ffffffffffffffffffffff
fdsffffffffffff</br> sfdg
ffffffffffffffffffffff
fdsffffffffffff</br> sfdg
ffffffffffffffffffffff
fdsffffffffffff</br>
</div>
</div>
</div>
.main{
width:500px;
height:200px;
background:black;
}
.content{
width:100ps;
height:200px;
background:red;
}
.ims{
float:left;
width:100px;
height:200px;
background:blue;
}
.qwe{
float:left;
width:300px
height:50px;
}
.wer{
width:200px
height:50px;
float:right;
}
.rty{
padding-top:80px;
width:400px
float:right;
}
Jfiddle
http://jsfiddle.net/qAEzr/