This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have 6 col-lg-3 in my container. Each div including another div, h4 and p.
Included divs have background-image, and some properties in CSS.
And I want to change included div background-image on hovering col-lg-3 div
But it just ignore :hover and nothing happening.
Ive tried not only change background-images, but change color, add borders, etc. But no response. Heres one of div.col-lg-3...
.reasons .col-lg-3 div {
width: 99px;
height: 99px;
margin: 10px auto 5px auto;
background-size: 99px 99px;
background-repeat: no-repeat;
transition: 0.5s ease;
}
.community:hover div {
background-image: url('img/communityReverse.png');
}
<div class="col-lg-3 community">
<div style="background-image: url('img/community.png')"></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
.community:hover div{ ... } seems not working, but for example .community:hover h4{ font-size: 30px; } ok, no problem. I cant see what is wrong
You had an issue on your CSS, because you were trying to nest the div inside a class that wasn't declared before (.reasons). Aside from that, you should declare the .community class inside the nested div, so the image will be separated on the code (better view and easier to deal with), then, just make the :hover event apply to the class, so whenever the mouse enters the area, it'll trigger the event and change the background.
Here goes a Snippet for better view of the code and how it works :
.community div {
width: 100%;
height: 99px;
margin: 10px auto 5px auto;
background-image: url("http://www.f-covers.com/cover/cute-baby-kitten-facebook-cover-timeline-banner-for-fb.jpg");
background-repeat: no-repeat;
background-size: contain;
transition: all 0.5s ease;
}
.community:hover div {
background-image: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/cats/lovely-american-shorthair-kitten-website-header.jpg");
}
<div class="col-lg-3 community">
<div></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
By the way, you don't have to specify a nested class when just wanting to work with general styles, as .community is nested as sibling with .col-lg-3, you can use either to change inner styles as I did in the Snippet above.
you check this code you are working with wrong code
.community div:hover
{
background-image: url('img/communityReverse.png');
}
you need to use !important in your code otherwise you have done well
.reasons .col-lg-3 div {
width: 99px;
height: 99px;
margin: 10px auto 5px auto;
background-size: 99px 99px;
background-repeat: no-repeat;
transition: 0.5s ease;
}
.community:hover div {
background-image: url('img/communityReverse.png') !important;
}
<div class="col-lg-3 community">
<div style="background-image: url('img/community.png')"></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Have you tried !important ?
.community:hover div {
background-image: url('img/communityReverse.png')!important;
}
Related
I am new to css and html, I created the following code:
Demo:
body {
background-color: powderblue;
}
#box {
border: 10px dashed;
black;
font-size: smaller;
font-weight: bold;
text-align: center;
padding: 15px;
background: orchid;
background-clip: border-box;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stack_css/stack.css">
</head>
<body>
<h1 style="text-align: center;">Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="box">
<p>Lorem Ipsum Doler Amet.</p>
</div>
</div>
</body>
</html>
I want the background-color inside the border to shrink inside the border and the text inside it to grow to larger when the <div> is on hover. I tried using #keyframes and animations but it didn't work. Any help is appreciated and sorry if my question is stupid or irrelevant, I am open to suggestions.
I used css transitions to increase the font-size of the text and to set the border-clip attribute to padding-box:
body {
background-color: powderblue;
}
#box {
border: 10px dashed black;
font-size: smaller;
font-weight: bold;
text-align: center;
padding: 15px;
background: orchid;
background-clip: border-box;
transition: background-clip 3s, font-size 2s;
transition-timing-function: ease-in;
}
#box:hover {
background-clip: padding-box;
font-size: larger;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stack_css/stack.css">
</head>
<body>
<h1 style="text-align: center;">Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="box">
<p>Lorem Ipsum Doler Amet.</p>
</div>
</div>
</body>
</html>
Explanation:-
I created css transitions to do the required changes upon hovering on the <div> element which has the Id #box
The background-clip property defines how far the background-color(or even image) should extend within an element. The padding-box value sets the background to extend to the inside edge of the border.
For more information: CSS_Background-Clip and
CSS_Transitions
I have found how to make non-rectangular shaped text from here (Unusual shape of a textarea?) and it works like a charm.
I need to limit this to 2 lines so I used overflow: hidden; but the area somehow returns to rectangular shape.
This is my html code.
.descTitle {
height: 20px;
width: 70px;
float: left;
border: none;
}
.descContent {
height: 40px;
line-height: 20px;
/*overflow: hidden; /* This breaks the form*/
}
.descOut {
height: 40px;
width: 100%;
}
<tr>
<td colspan=1>
<div class='descOut'>
<div class='descTitle'>
<label for='txt9'><b>Description: </b></label>
</div>
<div class='descContent' contenteditable='true' style='font-color:black; font-size: 11px; font-family:arial'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</td>
</tr>
It works great when I comment out the overflow line but somehow it breaks the form when being used.
Can anyone help me to find out how to limit the contents to 2 lines without breaking unusual shaped text area?
While developing new website for our client (he delivered design and insisted on using flexbox), we've come to element that looks like this (the "Samochody Peugeot" section with 2 little boxes at right):
Grid starts at text in left box, and ends at end of image in right boxes. The only real solution that we can find is to create the gray background using absolute positioned :before pseudo-element, but it seems pretty hacky.
At bigger widths the gray bg should expand to left, but everything else should stay in grid.
Is there any better way to achieve this kind of layout than using :before?
<section class="boxes">
<div class="container">
<div class="boxes__box">
<h3>Samochody<br/>PEUGEOT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
<div class="boxes__box-holder">
<div class="boxes__box boxes__box--small">
<h3>PONAD 20 LAT<br/>DOŚWIADCZENIA</h3>
<a class="btn" href="">O firmie</a>
</div>
<div class="boxes__box boxes__box--small">
<h3>POZNAJ NASZE<br/>USŁUGI</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
</div>
</div>
</section>
.boxes {
.container {
display: flex;
}
&__box {
width: 68%;
background: orange;
position: relative;
&:first-child:before {
content: '';
height: 100%;
width: 100vw;
background: red;
position: absolute;
right: 100%;
z-index: -1;
top: 0;
}
}
&__box-holder {
width: 32%;
}
}
I have a simple page where the all the content (<h1>, <h2>, <p>, etc.) is contained within a <div>, in order to have the same width.
I like the way the body text looks and want to keep it that way, but I'd like to add a background image to the heading. It should start from the very top of the page (and window, in my case) and end at the baseline of the last line of the heading itself, while also extending in width from the left side of the window to its right. In the following image I illustrated the desired layout. Below it, I've drawn the html hierarchy that I've attempted.
In fact, I've already tried creating a child of <h1> with
width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);
but:
Since the page has z-index: -1;, for some weird bug I can't click on links with relative positioning
I'd prefer not to use vw unites because of browser support.
I still can't manage to extend the background to the top.
The font size of <h1> and its margins are defined in pixels, as you see, but the page still behaves dynamically because as I resize the window, the number of lines of <h1> increases.
HTML
<div class="page">
<h1>Heading</h1>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
body {
height: 100%;
width: 100%;
margin:0px;
}
.page {
font-size: 20px;
width: 90%;
max-width: 70ch;
padding: 50px 5%;
margin: auto;
z-index: -1;
}
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
margin-bottom: 26px;
}
p {margin-bottom: 24px;}
JS Fiddle
Two suggestions:
Separate the h1 and the rest of the body in two different divs. Apply the background to the first div.
<div class="background-here">
<div class="page">
<h1>Heading</h1>
</div>
</div>
<div class="page">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Or you could just apply the background to the body and use background-repeat: repeat-x or bakcground-size: cover. But it depends on how the image was designed.
The image below represents a website layout I am trying to create. The blue section (bottom right) represents an image should be behind the three neighboring elements and overflow them slightly.
I do not know the best way to do this, at the minute I have a wrapper div round the colored sections and put a background image in there but I am not sure if this is the best approach as the wrapper div needs to have a fixed size.
Any suggestions would be very welcome.
http://www.gumpshen.com/images/layout.png
If I understand you correctly this is my answer:
If the grey is a header, just treat it how you wish.
Then have a "content" div that wraps yellow, red, green and blue, which should be relatively positioned. From there you can absolutely position the blue so that it overlaps yellow, red and green. Then with some z-indexing you should have what you need.
this should be what you need...
Your CSS should look something like this:
<!-- add CSS Reset before this -->
#header {
background-color:#888;
height:100px;
}
#content {
position:relative;
float:left;
}
#topleft {
position:relative;
float:left;
width:50%;
background-color:yellow;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#topright {
position:relative;
float:left;
width:50%;
background-color:red;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#bottomleft {
position:relative;
float:left;
width:50%;
background-color:green;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#bottomright {
position:absolute;
left:49%;
bottom:0;
width:50%;
padding:20px 0 0 17px;
background-color:blue;
z-index:2;
min-height:100px;
}
Your HTML should look something like this:
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="topleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="topright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="bottomright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
note: "lorem ipsum", opacity and min-height added just for show :)
Is it fixed width? If so, you can do some cheats with background images. If it's fixed with and fixed height, then even better - just save the whole image as a background.
You could also give your image a background image, like so:
#MyImage {
padding: 20px 0 0 20px;
background: url(images/image-background.jpg) top left no-repeat;
}
The image will then sit in the middle, with the background showing around the edge. Then your image can be, say, 200x100px, with your background image being 220x120px.
I will assume that you have the colored blocks figured out already.
Now you can put the original image in the blue box as a background, positioned at the right bottom and position a semi-transparent version of that image (or use css transparency) absolutely at the right bottom of your wrapper. The semi-transparent image on top of the original won´t show, it will just show in the surrounding boxes.
Use relative positioning to position the elements and don't forget to set the right Z-Index values to the div you want to put on top.