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
Related
I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
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>
I Jerry-rigged a line behind 3 elements by having bars on the right and left of the elements. However, this solution isn't consistent across browsers -- See images below.
Is there a better way to place a line centered behind several objects using HTML and CSS? I tried and failed using pseudo elements/selectors (i.e., :after or :before) before coming to my solution below, but I don't want to rule them out.
Chrome
IE
My solution is, in fact, so jerry-rigged that I can't reproduce it in JS fiddle, but I did something like this:
(My fiddle just for reference https://jsfiddle.net/8t6qtafy/1/)
HTML
<div class="tab-header">
<span>
<div class="header-bar bar-left bar-blank"></div>
<p>1</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>2</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>3</p>
<div class="header-bar bar-right bar-blank"></div>
</span>
</div>
CSS
html {
font-family: calibri;
}
.container {
width = 400px;
margin:auto;
}
.tab-header {
margin-top:10px;
position:relative;
padding:5px 10px;
//display:inline-block;
}
.tab-header span {
height:45px;
width:45px;
border-radius:50%;
margin:auto;
color:#4c4a47;
background-color:transparent;
border:2px solid #99958E;
display:block;
position:relative;
}
.tab-header span p {
font-size:30px;
font-weight:bold;
text-align:center;
position:relative;
top:-4px;
left:.5px;
margin:2px;
}
.tab-header .header-bar {
width:130px;
height:3px;
background-color:#99958E;
position:relative;
}
.tab-header .bar-right {
left:42px;
top:-36px;
}
.tab-header .bar-left {
right:130px;
top: 19px;
}
.tab-header .header-bar.bar-blank {
background-color:transparent;
}
A bit late to the party: what browsers needed to be compatible?
Something like that is a bit neater and could work on all modern browsers and IE10: https://jsfiddle.net/fparent/qhprm41a
<div class="tab-header">
<span class="step active">1</span>
<span class="step">2</span>
<span class="step">3</span>
</div>
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
I'm currently redoing some code to update to HTML5 (and trying to de-uglify CSS), but so far my alignment and layout doesn't seem to be working as expected. Here's part of what I have:
<main class="width">
<div class="r1">
<section class="c1">
<h1>header</h1>
stuff
</section>
<!--Line Break-->
<section class="c1">
<h1>header</h1>
stuff
</section>
</div>
<!--Next Column-->
<div class="r2">
<section class="c2">
<h1>header</h1>
stuff
</section>
</div>
</main>
CSS:
#font-face {
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:url(/resources/font.woff) format('woff');
}
* {
margin:0;
padding:0;
font-size:small;
font-family:Roboto;
vertical-align:middle;
border:none;
text-decoration:none;
}
.width {
margin:0 auto;
width:86%;
min-width:1000px;
}
.bg {
min-width:1000px;
background:linear-gradient(#444, #000, #444);
}
main {
line-height:1.5;
text-align:center;
}
body>.main {
font-size:0;
}
section {
border:1px solid #BBB;
background:#000;
border-radius:7px;
display:inline-block;
overflow:hidden;
}
h1 {
background:linear-gradient(#444, #000, #444);
padding:5px;
color:#FFF;
}
.r1 {
color:#FFF;
display:inline-block;
}
.r2 {
color:#FFF;
display:inline-block;
}
.c1 {
width:33%;
}
.c2 {
width:66%;
}
(Ignore r1 and c1 naming. They don't actually represent a row or column)
However, this does not work the way it used to. What I'm trying to do is to have two rows of 66% width columns above each other, and then next to them, a larger single 33% width column to the right of them. Instead, I've got the the first two sections on one line, taking up a total of 66% width (so each section is 33% width), and then the next section ends up underneath it.
Ideally, I want to use the flex code, so that I can use up all available space, but I'm still new to it, and don't know my way around it very well. The problem with using percentage widths is that even after white-space removal, things still break to the next line when zoomed in enough, and I think that the flex method is more elegant and modern anyway.