.footer_image {
height: 60rem;
}
<footer>
<div class="footer_image">
<img src="https://via.placeholder.com/200x200" style="margin-left:20px">
</div>
</footer>
I cant seem to target the properties to change my image in my footer, what am I doing wrong?
You can use
.footer_image img {
}
This will work on all pictures which have the html img tag and are inside the .footer_image class
Or you can assign a class or id to your image to define its properties
<img class="mysuperfancyimage" src="logo_footer.png" style="margin-left:20px">
<img id="mysuperfancyimage" src="logo_footer.png" style="margin-left:20px">
You can call classes with a dot and and IDs with a Rhombus
.mysuperfancyimage {
}
#mysuperfancyimage {
}
This works nicely - the problem might be that you're targeting the image parent, not the image itself.
.footer_image > img {
height: 60rem;
}
<footer>
<div class="footer_image">
<img src="logo_footer.png" style="margin-left:20px">
</div>
</footer>
Related
I have a section 2 blocks: one - with 3 images, second - with 3 links. Each image has it's own class (class=".img1") that is connected to a definite link with datakey=".img1".
When I hover over each link the definite image is being shown.
The section is a repeater block, that has a loop of images inside (I use ACF for this).
So when I have multiple sections on the page, the link hover from one section changes images in all other sections.
I was trying to use .each() to specify the parent section and then call .hover for links, but it doesn't work the way I need. I'm stuck in this and seems need to use another option.
JSfiddle with 1 section - https://jsfiddle.net/vernigoranataly/Lnwmjq3c/42/
JSfiddle with 2 sections - https://jsfiddle.net/vernigoranataly/kLtz5v4c/4/
JS:
$('.section_product-category ').each(function() {
$('.prodcat_btn .button-link').hover(
function() {
$($(this).data("key")).addClass('active');
$($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');
},
function() {
$($(this).data("key")).removeClass('active');
$($('.prodcat-img1')).addClass('active');
}
);
});
HTML:
<section class="section_product-category ">
<div class="prodcat_imgs">
<div class="prodcat_img prodcat-img1 active">
<img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img2">
<img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img3">
<img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
</div>
</div>
<div class="prodcat_text">
<h2>Category #1 links</h2>
<div class="prodcat_btn btn">
<a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
<a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
<a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
</div>
</div>
</section>
Update
I misunderstood what one part of your code was trying to do, and had replaced it with a different approach. I've updated my answer to use that part of your original code.
The problem is because each set has a <div> with the same class, like prodcat-img1, and the code which makes an image active:
$($(this).data("key")).addClass('active');
which evaluates to, eg:
$('.prodcat-img1').addClass('active');
matches all <div>s with that class, ie every one on the page.
The solution is to target only the ones in the current <section>, using something like:
$(this)
.closest('.section_product-category')
.find($(this).data("key"))
.addClass('active');
$(this) is the current element which triggered the hover/unhover event;
.closest() will traverse up the DOM tree until it finds the first match. In this case we look for the parent <section> which encloses this set of links and images;
.find() searches down the DOM tree from the current element for elements matching the selector. In this case we look for the (single!) element inside the <section> we found with a class matching your data-key;
Next, The same problem exists with this line:
$($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');
It will target every div on the page with the relevant class (eg .prodcat-img1), not just the one in the current section.
We can use the same fix though - start at the parent <section>, find the divs with active class, and remove that class. We just wrap the whole selector in the same code as above:
$(this)
.closest('.section_product-category')
.find($($('.prodcat_btn .button-link').not(this).data('key')))
.removeClass('active');
There is one other issue with this line - if you remove the class from the <div>s after you add it to the one we want, you're left with none of them with the class! :-) You need to remove the class from everything first, then add it to just the one we want. You already have that the right way around in the hover-out handler, just not in this hover handler.
Another issue is this code:
$('.section_product-category ').each(function() {
$('.prodcat_btn .button-link').hover( ...
Here you are iterating over all .section_product-category on the page, and adding handlers for $('.prodcat_btn .button-link'). But $('.prodcat_btn .button-link') matches every one of those elements on the page. So on the first iteration, you add a handler which matches every $('.prodcat_btn .button-link') on the page. The second iteration, you do it all again! The handlers just add up, they don't overwrite each other, and this means that every time you mouse over one of your links, your handler code runs 2x, or 3x if you have 3 sets, etc. You can confirm this by putting a console.log() inside your hover function - you'll see as many log lines written as you have <section>s, for a single mouse-over.
If you're lucky they won't interfere with each other, but depending on what they do they can, and you end up with weird behaviour. You can just remove the iteration - the single selector matches everything.
Here's a working snippet, starting from your 2-section JSFiddle, with those issues fixed:
$('.prodcat_btn .button-link').hover(
function() {
// $($(this).data("key")).addClass('active');
// $($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');
let $section = $(this).closest('.section_product-category');
// My original approach to remove active classes in this section
// $section.find('.prodcat_img').not($(this)).removeClass('active');
// Your original approach, updated to only target the current section
$section.find($($('.prodcat_btn .button-link').not($(this)).data('key'))).removeClass('active');
$section.find($(this).data("key")).addClass('active');
},
function() {
// $($(this).data("key")).removeClass('active');
// $($('.prodcat-img1')).addClass('active');
let $section = $(this).closest('.section_product-category');
$section.find($(this).data("key")).removeClass('active');
$section.find('.prodcat-img1').addClass('active');
}
);
.section_product-category {
display: flex;
width: 90%;
margin-bottom: 20px;
}
.section_product-category>div {
width: 70%;
}
.section_product-category>div:first-child {
width: 30%;
}
h2 {
margin-bottom: 45px;
}
.prodcat_img {
display: none;
overflow: hidden;
position: relative;
padding-top: 135%;
border: 1px solid blue;
}
.prodcat_text {
padding: 20px 20px 20px 40px;
}
.prodcat_img img {
position: absolute;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.prodcat_img.active {
display: block;
}
.button-link {
margin-bottom: 7px;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section_product-category ">
<div class="prodcat_imgs">
<div class="prodcat_img prodcat-img1 active">
<img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img2">
<img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img3">
<img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
</div>
</div>
<div class="prodcat_text">
<h2>Category #1 links</h2>
<div class="prodcat_btn btn">
<a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
<a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
<a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
</div>
</div>
</section>
<section class="section_product-category ">
<div class="prodcat_imgs">
<div class="prodcat_img prodcat-img1 active">
<img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img2">
<img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
</div>
<div class="prodcat_img prodcat-img3">
<img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
</div>
</div>
<div class="prodcat_text">
<h2>Category #2 links</h2>
<div class="prodcat_btn btn">
<a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
<a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
<a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
</div>
</div>
</section>
This question already has answers here:
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 1 year ago.
I'm been working on finding a way to change my even and odd setup so it relies more on the classes instead of the html strucktur but am at a complet loss.
The setup i but below works but if there's too much change to the HTML it would likely break.
(The HTML images gives a simpel overview)
The collapsed HTML version shows 3 div's but the 2 div is actually a set of 2.
The classes it goes like this:
academy-subject-block
academy-column-block
academy-column-block
academy-subject-block
The end result is 4 squares where the first one keeps it's image from what it had on tablet size screens and above.
The next 3 will alternate between a white and a light grey bagground-color without the images.
HTML from browser view:
HTML Viewed from browser
HTML Viewed from browser collapsed
HTML:
<div class="container academy ">
<div class="academy-front-page">
<div class="fullPageAdjustment">
#Html.PropertyFor(m => m.CurrentPage.ContentArea)
</div>
</div>
</div>
-------------------------------------------------------------
<div class="academy-subject-block">
<div class="row">
<div class="col-xs-12">
<div class="img-fullwidth cover-image">
<img src="#Url.ContentUrl(Model.CoverImage)" alt="Cover Image" class="fill-height-image min-height"/>
<div class="cta-turquiose-centerallign-mobile">
<a href="#Url.ContentUrl(Model.ButtonLink)" class="pulse animated btn bta-cta-turkuoise">
#Html.PropertyFor(l => l.ButtonText)
</a>
</div>
</div>
</div>
</div>
<div class="text-block-image fadeIn animated">
#Html.PropertyFor(m => m.OverlayText)
</div>
</div>
-------------------------------------------------------------
<div class="academy-column-block ">
<div class="img-fullwidth cover-image">
<img src="#Url.ContentUrl(Model.CoverImage)" alt="Cover Image" class="fill-height-img min-height"/>
<div class="cta-turquiose-centerallign">
<a href="#Url.ContentUrl(Model.ButtonLink)" class="pulse animated btn bta-cta-turkuoise">
#Html.PropertyFor(l => l.ButtonText)
</a>
</div>
</div>
<div class="text-block-image-column-block fadeIn animated">
#Html.PropertyFor(m => m.OverlayText)
</div>
</div>
SCSS:
//Pulls the section up and down as to remove any spacing
.academy-front-page {
.fullPageAdjustment {
#include mobile {
position: relative;
margin-top: -80px;
bottom: -40px;
}
}
//Removes images but keeps the size without effecting the fist image
//And adds new text color to images that have changed
:not(:first-child) {
#include mobile {
img {
width: 0;
}
.text-block-image-column-block {
color: #{$Color-DarkPurple};
}
.text-block-image {
color: #{$Color-DarkPurple};
}
}
}
//Switches between background-colors of the images with exception of the fist one (Mobile only)
div :nth-child(odd) {
#include mobile {
.img-fullwidth {
background-color: #{$Color-White};
}
.hidden-print {
.img-fullwidth {
background-color: #{$Color-WhiteSmoke};
}
}
}
}
:nth-child(even) {
#include mobile {
.img-fullwidth {
background-color: #{$Color-White};
}
.hidden-print {
.img-fullwidth {
background-color: #{$Color-WhiteSmoke};
}
}
}
}
}
Afaik, this is currently not possible with CSS alone.
You would have to:
use Javascript to implement that CSS class based or
go with the CSS pseudo classes :nth-of-type or :nth-child depending on HTML elements.
So I only want to change a small part of my website. I thought it would be easy, but somehow it doesn't change and I don't know why. I'm using bootstrap so that might make it a little bit difficult. I want to change my sidebar from just one solid color to an image. And it just doesn't show, when I delete the color it just shows nothing. I'm trying to use the 'background-image' property.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/flat2.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="border-right" id="sidebar-wrapper" >
<div class="sidebar-heading"> <img src="text\flat.png" class="title" alt="FLAT"> </div>
<div class="list-group list-group-flush zijkantje">
<img src="text/home.png" onMouseOver="this.src='text/home2.png'" onMouseOut="this.src='text/home.png'" alt="Home" class="glassescase" id="thuis">
<img src="text/risoprints.png" onMouseOver="this.src='text/risoprints2.png'" onMouseOut="this.src='text/risoprints.png'" alt="Risoprints" class="glassescase" id="glassescase">
<img src="text/paintings.png" onMouseOver="this.src='text/paintings2.png'" onMouseOut="this.src='text/paintings.png'" alt="Paintings" class="glassescase" id="littlehouse">
<img src="text/tiles2.png" onMouseOver="this.src='text/tiles.png'" onMouseOut="this.src='text/tiles2.png'" alt="Tiles" class="glassescase" id="ceramic">
<img src="text/alphabet.png" onMouseOver="this.src='text/alphabet2.png'" onMouseOut="this.src='text/alphabet.png'" alt="Alphabet patterns" class="glassescase" id="green">
<img src="text/collage.png" onMouseOver="this.src='text/collage2.png'" onMouseOut="this.src='text/collage.png'" alt="Collage" class="glassescase" id="collage">
<img src="text/Tarotdeck.png" onMouseOver="this.src='text/tarotdeck2.png'" onMouseOut="this.src='text/Tarotdeck.png'" alt="Tarot deck" class="glassescase" id="tarot">
<img src="text/digital.png" onMouseOver="this.src='text/digital2.png'" onMouseOut="this.src='text/digital.png'" alt="Digital" class="glassescase" id="digital">
</div>
</div>
This is for a larger screen, this is the css:
Navbar2 is for the smaller screen.
#sidebar-wrapper {
margin-left: 0;
width:150px;
background-image: url("sidebar.png") !important;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
.navbar2 {
display: none;
}
.zijkantje {
position: relative;
display: flex;
align-items:flex-start;
margin-top:10px;
justify-content:space-around;
margin-left: 27px;
}
Hopefully this is enough code to figure out what goes wrong. I always find it more difficult to change a small detail from an already finished site hah. I'm new to coding btw, be kind :)
U can use the Inspector integrated on your browser to review the code, anyway:
Are u sure is the correct image route which you want to use ?.
Set the background-repeat and background-position properties to be sure the image shows correctly, and also background-size if necessary.
Check if sidenav have the background-blend-mode property, and removeit.
I don't know how to explain this very well but...
I want to select an element but it's like "far" from other one
Like this:
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
.image.forest [some selector idk] p {
color: red;
}
.image.train [some selector idk] p {
color: blue;
}
You could re-write it like this if it works for you.
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>I want to change the color of this text if the image there ^ is "forest", which I'll change with JS</p>
<style>
.forest + p {
color: red;
}
.train + p {
color: blue;
}
</style>
Why dont you just add a class to the p tag right after the forest image.
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p class="forest-paragraph"></p>
.forest-paragraph {
color: #000;
}
You'd need to go from <img> to <div> to <p>, but going from <img> to <div> presents a problem: there is no CSS selector that allows one to reference an element that is higher up in the DOM tree, i.e. no child-to-parent selector.
Instead, you can apply the .forest class to the <div>.
HTML:
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
CSS:
.forest + p {
color: red;
}
I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.
Here is the page I am working with if you'd like to take a look:
http://www.bolistylus.com/shop/
This is what I'm trying to override:
.products li {
float: left;
margin: 0 10px 20px 0;
padding: 0;
position: relative;
width: 150px;
}
Here is the HTML I'm working with:
<div id="main">
<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> › Shop</div>
<h1 class="page-title">All Products</h1>
<ul class="products">
<li class="product first">
<a href="http://www.bolistylus.com/shop/boli-2/">
<img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />
<strong>Boli Pink</strong>
<span class="price">$24.00</span>
</a>
Add to cart
</li> <li class="product ">
</li></ul><div class="clear"></div>
</div></section>
</div><!-- #main -->
.products li has a specificity of (0, 0, 1, 1)
a minimal higher specificity can be created with
ul.products li which has a specificity of (0, 0, 1, 2)
See this jsfiddle: http://jsfiddle.net/DAL9A/
.products li and you can use !important if it doesnt take. Try to load that after what your trying to override.
UPDATE*
Try just using ".product"
Actually just ready your comments. What are you trying to target? The image? If So you should get the width and height out of inline and apply it in CSS