I'm trying to use :after selector to draw a inside-border in every div I hover. Now the ":after" pseudo class doesn't work? any idea why this selector doesn't work? if I just use the :hover pseudo class works, the thing is that I want to use both classes!
Have a look at this EX
thanks!
<body>
<h1>Example Six</h1>
<p>Grade: A</p>
<p>this is the thing</p>
<div class="w3c">
<div id="tab16">
cars
<div class="test">
<div><img alt="" src="http://placehold.it/176x106/" /></div>
</div>
</div> <!-- ends tab16 -->
<div id="tab17">
othercars
<div>
<div><img alt="" src="http://placehold.it/180x110/" /></div>
<div><img alt="" src="http://placehold.it/180x110/" /></div>
</div>
</div> <!-- ends .w3c -->
</body>
The css:
#charset "utf-8";
/* CSS Document */
.w3c {
min-height: 250px;
position: relative;
width: 554px;
}
.w3c > div {
display: inline;
}
.w3c > div > a {
margin-left: -1px;
position: relative;
left: 1px;
text-decoration: none;
color: #fff;
background: #666666;
display: block;
float: left;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid white;
}
.w3c > div:not(:target) > a {
border-bottom: 0;
background: #b0b0b0;
/*-moz-linear-gradient(top, white, #eee); */
}
.w3c > div:target > a {
background: white;
color: #b0b0b0;
}
.w3c > div > div {
background: white;
z-index: 0;
left: 0;
top: 30px;
bottom: 0;
right: 0;
padding: 10px;
border: 1px solid #ccc;
width: 596px;
height: 133px;
}
.w3c div div > div {
border: 1px solid red;
float: left;
width: 180px;
height:110px;
margin-left: 10px;
}
.w3c div div > div:hover:after {
border: 1px solid black;
width:178px;
height: 108px;
}
/* .w3c > div > div > a > img:after {
border: 2px solid black;
width:178;
height: 108px;
} */
.w3c > div:not(:target) > div {
position: absolute;
}
.w3c > div:target > div {
position: absolute;
z-index: 1;
}
For the :after pseudo-element to show up you need to give it content and display it as a block.
Then, absolutely position the :after and relatively position the div itself:
.w3c div div > div {
position: relative;
border: 1px solid red;
float: left;
width: 180px;
height: 110px;
margin-left: 10px;
}
.w3c div div > div:hover:after {
display: block;
content: '';
position: absolute;
border: 1px solid black;
width: 178px;
height: 108px;
}
I've found out what the problem is.
::after is used to add content after an existing element, not to style elements that come after things.
You might want to use nth-child() to target the x elements, or every x element.
.w3c div div > div:nth-child(2):hover {
border: 1px solid black;
}
http://css-tricks.com/how-nth-child-works/
Related
The above is an image of a project I'm working on. This is how far I got:
Creating the box was fairly simple; however, now I have NO IDEA how to create this cut corner on the bottom left. I've tried a bunch of things already and most things work if the background isn't transparent but a block of color. Since the background needs to be this image, I can't make the cut corner work without having one side show a certain color. This is my code:
<div class="profile">
// HTML content
</div>
<style>
profile {
border: 2px solid #fff;
color: #fff;
height: 100%;
padding: 10px;
width: 250px;
</style>
I've tried multiple things already, such as this here (not the exact code I used, but I followed this example):
.cut {
border: none;
position: relative;
}
.cut:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-bottom: 20px solid lightgrey;
border-left: 20px solid #e67e22;
width: 0;
}
This creates a cut corner, but with a block of a solid color and I need the image to be shown, not the color.
Does anyone have a clue how to do this? Suggestions are much appreciated. Thanks!
You may use before/after element to make the bottom part like this :
.profile {
position:relative;
display:inline-block;
margin:50px;
border:1px solid #000;
border-bottom:none;
width:100px;
height:200px;
background:#ccc;
}
.profile:after {
content:" ";
position:absolute;
border:1px solid #000;
height:20px;
width:80px;
bottom:-20px;
right:-1px;
border-top:0;
border-left:0;
background:#ccc;
}
.profile:before {
content:" ";
position:absolute;
border-bottom:1px solid #000;
height:29px;
width:29px;
transform:rotate(45deg);
bottom:-15px;
left:6px;
background:#ccc;
}
<div class="profile"></div>
the bottom is split into tow part : a rectangle with only two border + a square with one border rotated with 45°
Hope it helps
NB : Becarefull when changing the dimensions
.profile {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.profile h2 {
margin: 0 0 10px;
}
.profile p {
font-size: 14px;
}
.profile .bottom {
position: absolute;
bottom: -30px;
right: -2px;
width: 180px;
height: 30px;
border-bottom: 2px solid #000;
box-sizing: border-box;
border-right: 2px solid #000;
}
.profile .bottom::before {
content: '';
position: absolute;
left: -10px;
bottom: -4px;
width: 2px;
height: 35px;
background-color: #000;
transform: rotate(-35deg);
}
<div class="profile">
<h2>Name</h2>
<p>Description</p>
<div class="bottom"></div>
</div>
I think you're trying to cut the corner of an image instead of div, so you can do something like this:
body {
background: url('https://www.lunapic.com/editor/premade/o-paint-bucket.gif');
}
.container {
display: inline-block;
width: 200px;
height: 300px;
overflow: hidden;
}
.container .image_container {
width: 320px;
height: 550px;
overflow: hidden;
display: block;
position: relative;
transform: rotate(45deg);
margin-left: calc(260px - 360px);
margin-top: -40px;
}
.container .image_container .image {
transform: rotate(-45deg);
margin-top: 10px;
margin-left: -10px;
}
<div class="container">
<div class="image_container">
<div class="image">
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</div>
</div>
</div>
What I'm trying to do is to create a triangle on the bottom border of a block with CSS, and write some text in there like it's shown in this figure :
What I did so far, is :
Create the block element, with its its orange big bottom border.
Create the triangle using CSS.
All I need now is a way to place that triangle exactly in the middle of that exact place. I tried several ways to do that, but without any result.
Here's my code :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
.content_block.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #FE992C;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
You can notice that there's an HTML class called triangle that I don't show. I don't know how to show it exactly in that position.
EDIT :
I'm using the exact selector ( .content_block ) for showing other blocks; Like this block for instance :
So, a solution with after pseudo element will affect this block too. This is why I really need to avoid pseudo elements..
Edit
If you can't use a pseudo element for the triangle, you will need to add an element. You can add it as a child of the .content_block element. This uses the same approach described in the original answer :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.triangle {
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="triangle"></div>
<div class="text">Je déménage</div>
</div>
Original answer:
You can make the triangle with the border technique and a pseudo element.
In the following example, I used the .content_block:after pseudo element with absolute positioning:
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
User :after selector and position that absolutely
Here is updated fiddle:
https://jsfiddle.net/yod8Lvjt/1/
I have nested elements, the container has a border style of one sort and I want some of the elements inside it to have their own border overlapping the container's border. I tried using negative margin, but the border of the child is hidden underneath the parent's (seems to be overflow issue).
HTML:
<div class="right">
<div class="itemlist">
<ol>
<li>Abc</li>
<li class="special">Abc</li>
<li>Abc</li>
<li>Abc</li>
<li class="special">Abc</li>
<li>Abc</li>
<li>Abc</li>
</ol>
</div>
</div>
CSS:
.right {
position: fixed;
right: 0;
top: 0;
width: 200px;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
border-left: 3px solid #76ff03;
}
.right .itemlist {
flex: 1;
overflow-y: auto;
}
.itemlist > ol > li {
border-bottom: 1px solid #76ff03;
padding-left: 20px;
}
.itemlist > ol > li:hover, .itemlist > ol > li.special {
border-left: 10px solid #2196f3;
border-bottom: 1px solid #2196f3;
margin-left: -3px;
}
I've seen some examples of this done and can make it work in some cases, but not consistently. I have an example JSFiddle with some layout, below is a picture of whet two of the list elements look like and what I want them to look like.
http://jsfiddle.net/jkondratowicz/e6uunLa4/1/
Here is a way to do it removing the margin on it's parent container and adding it to each row individually
.right {
position: fixed;
right: 0;
top: 0;
width: 200px;
background: #78909c;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
.itemlist > ol > li {
border-bottom: 1px solid #76ff03;
border-left: 3px solid #76ff03;
padding-left: 20px;
}
Here are the styles you need using box-shadow
.itemlist > ol > li {
box-shadow: inset 3px -1px 0px 0px #76ff03;
padding-left: 20px;
}
.right .itemlist {
flex: 1;
overflow-y: auto;
box-shadow: inset 3px 0px 0px 0px #76ff03;
}
.itemlist > ol > li:hover, .itemlist > ol > li.special {
box-shadow: inset 10px -1px 0px 0px #2196f3;
padding-left: 25px;
}
.right {
position: fixed;
right: 0;
top: 0;
width: 200px;
background: #78909c;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
http://jsfiddle.net/xnjn17uL/2/
According to a trick found in Stack overflow, I can change the background of the parent element hovering a child like this:
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
But I need to change the background color hovering different child elements. For example, hovering the Facebook button, the background goes blue, while hovering the Google + button, the backgroud goes red.
I've tried this:
<div class="share_box">
<div class="white-container">
<div class="facebook-sibling"/>
<a class="facebook-child-button"/>
<div class="twitter-sibling"/>
<a class="twitter-child-button"/>
<div class="googleplus-sibling"/>
<a class="googleplus-child-button"/>
</div>
</div>
but for multiple buttons it didn't work. The result I expect is similar to:
If you set the parent position: relative, it will contain any position: absolute children.
Create a new element inside the end of the parent, then make it position: absolute and position and size it so that it fills the parent.
Then use z-index: -1 to set it behind the rest of the content (e.g. the buttons).
Then you can use the General Sibling Combinator (~) to select the new element after the hovered element.
.facebook:hover ~ .background { background-color: rgb(50, 100, 150); }
.twitter:hover ~ .background { background-color: rgb(50, 150, 250); }
.google:hover ~ .background { background-color: rgb(250, 75, 50); }
.share {
position: relative;
}
.background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
} /* Following styling for demo purposes only, not relevant */ .facebook:before { background-position:-46px -28px; width:101px; } .twitter:before { background-position:-151px -28px; width:90px; } .google:before { background-position:-245px -28px; width:94px; } .button:before { display:inline-block; content: ""; height:36px; background-image:url("http://i.stack.imgur.com/AXvMk.png"); border-radius: 3px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2); } .button { display:inline-block; padding: 2px; } .white-container { padding: 10px 20px; font-size: 0; background: #fff; border-radius: 3px; } .background { background: #fff; } body { margin: 0 4px; border: 1px solid #aaa; border-top: 0px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1) } .share { padding: 10px 15px; box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.3) inset } body:before { content: ''; height: 4px; display: block; background: #fff; border-bottom: 1px solid #aaa } html { background: #efefef }
<div class="share">
<div class="white-container">
<div class="background"></div>
</div>
</div>
Is this what you want?
DEMO 1: http://jsfiddle.net/t73431y8/
DEMO 2: http://jsfiddle.net/t73431y8/2/
HTML:
<div class="PARENT">
<div class="RED">RED</div>
<div class="BLUE">BLUE</div>
<div class="GREEN">GREEN</div>
</div>
CSS:
.PARENT{
position: relative;
}
.RED{
display: inline-block;
margin: 5px;
padding: 5px;
color: #BB0000;
background: #FFF;
}
.RED:hover:after{
display: block;
width: 100%;
height: 100%;
background: #BB0000;
position: absolute;
top: 0px;
left: 0px;
content: ' ';
z-index: -1;
}
.BLUE{
display: inline-block;
margin: 5px;
padding: 5px;
color: #0000BB;
background: #FFF;
}
.BLUE:hover:after{
display: block;
width: 100%;
height: 100%;
background: #0000BB;
position: absolute;
top: 0px;
left: 0px;
content: ' ';
z-index: -1;
}
.GREEN{
display: inline-block;
margin: 5px;
padding: 5px;
color: #00BB00;
background: #FFF;
}
.GREEN:hover:after{
display: block;
width: 100%;
height: 100%;
background: #00BB00;
position: absolute;
top: 0px;
left: 0px;
content: ' ';
z-index: -1;
}
I have a custom CSS Tooltip that when it appears, it pushes the other content down. I know that I need to add position: absolute to get it working right, but I can't seem to figure out where...
HTML:
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<div class="outer">
<a class="tippy" href="">
ICON<img src="" class="icon"/>
</a>
<div class="tooltip">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
</div><!-- Container -->
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
CSS:
.outer {
width: 350px;
}
.tippy {
text-decoration: none;
}
a.tippy:hover + div {
display:block;
float: right;
}
.tooltip {
margin-left: 5px;
margin-top: -15px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.tooltip:after, .tooltip:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.tooltip:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.tooltip:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Fiddle:
You need to change position:relative to position:absolute in the .tooltip CSS block.
You will also need to modify the CSS for positioning the tooltip due to this change.
If you modify .outer to have position:relative this is as simple as setting .tooltip as
left:55px;
top:-15px;
The resulting CSS (showing only the blocks that have changed):
.outer {
width: 350px;
position:relative;
}
.tooltip {
left: 55px;
top: -15px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: absolute;
border: 2px solid #333;
display: none;
}
And finally a jsFiddle showing it in action.