I used bootstrap thumbnail class to create a grid of clickable images. For some reason, they have a border and its annoying me.
HTML:
<div class = "the-grid">
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail">
<image src = "Images/data.png"/>
</div>
<div class = "thumbnail">
<image src = "Images/cloud.png"/>
</div>
</div>
</div>
</div>
CSS:
<style>
.the-grid{
background-color: #efefef;
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
}
.the-grid .row .thumbnail{
border: 0px;
box-shadow: none;
border-radius:0px;
background-color: #000;
}
.the-grid .row .thumbnail img:hover {
background-color: #000 !importantl
</style>
You can override the default bootstrap thumbnail border setting by adding this to your CSS file:
.thumbnail {
border: 0;
}
You can also simulate this by inspecting the properties of a thumbnail in Chrome. Find .thumbnail properties and uncheck border. You will see it disappear from your image.
Screenshot of .thumbnail
Once you add the code to your CSS file. Re-inspect and you will see that the border property with a strikethrough.
.thumbnail with no border
Just remove all border property's from .thumbnail and all borders will be removed
.the-grid .row .thumbnail{
box-shadow: none;
}
Go into your bootstrap.min.css (if you have it local, otherwise you have to download it) and search for: ".thumbnail" and then delete the part where it says "border" or so.. Don't have any bootstrap version aviable otherwise I will say you where that is, sry.
After inspecting the element, the padding was what i needed to adjust on mine as well as the border to remove that box just in case anyone else runs into this.
thumbnail {
padding: 0;
border: 0;
}
If you using latest Bootstrap,
use class "img-thumbnail" on your img tag !
Example:
<img class ="img-thumbnail" src="Your_Path_Image" alt="">
& Add class "img-thumbnail" on your file custom CSS Bootstrap!
Example:
.img-thumbnail{
background: none;
border: none;
}
why dont you just add the border class like this...
<img class="img-thumbnail border border-0" src="photo_location..." alt="photo">
Related
When the .post-item <div> is hovered I want to execute some specific styles (change background-color and cursor) but I don't want this to happen if the .rating-wrapper <div> is hovered too. This happens because I want the .rating-wrapper to do something different than the hover of its parent. Basic question: How to do only child's hover, ignoring the parent's hover
HTML:
<div class="post-item">
<div class="rating-wrapper">
<div class="upvote">
<img src="/images/upvote_arrow.png" alt="upvote" />
</div>
<div class="rating"></div>
<div class="downvote">
<img src="/images/downvote_arrow.png" alt="downvote" />
</div>
</div>
<span class="owner-data">
<img src="" alt="" class="owner-avatar" />
<span class="owner-username"></span>
</span>
<span class="creation-date"></span>
<div class="title"></div>
</div>
Since you want to change the style of the parent element based on a pseudo-class of the child element, this isn't really possible with CSS alone today.
You can do it with the :has() pseudo-class but that is currently only supported in Safari (with support for Chrome a few months away and no sign of it in Firefox, Edge, Opera or elsewhere).
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(:has(#child:hover)) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
For a more reliable approach, you should probably look at adding a splash of JavaScript to the mix.
Use mouseenter and mouseleave events to modify the classes of the parent element, then reference the class in your stylesheet.
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
const enter = event => parent.classList.add('child-hover');
const leave = event => parent.classList.remove('child-hover');
child.addEventListener('mouseenter', enter);
child.addEventListener('mouseleave', leave);
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(.child-hover) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
You can use this CSS Selector,
.post-item>:not(.rating-wrapper):hover {
background-color: white;
}
This will select all immediate children of .post-item which are not .rating-wrapper.
To change the block of the remaining items background color, you can enclose them in another div.
There is a css property called not property.The syntax is like:
:not(element) {
// CSS Property}
If you want to learn more, please visit this link:
https://www.geeksforgeeks.org/how-to-exclude-particular-class-name-from-css-selector/
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
try:
pointer-events: none
you can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I am jQuery-phobic and new to css. So, please do not recommend to use jQuery.
I have two questions with my code.
[solved]When I click any one of .active divs, others go down. How to fix it on top?
How to change display from none to active as I click the div? (the code I wrote only show the div as long as I 'click' it)
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
.active:active > .hidden{
display: block;
margin : 0 0;
}
<div class = 'wrap'>
<div class = 'active'>
<h2>1</h2>
<div class ='hidden' onclick='layer_toggle()'>a</div>
</div>
<div class = 'active'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>
If the usual javascript function suits you.
function switch_active(e) {
if (e.querySelector('.hidden').style.display == 'none') {
e.querySelector('.hidden').style.display = 'block';
} else {
e.querySelector('.hidden').style.display = 'none';
}
}
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
<div class = 'wrap'>
<div class = 'active' onclick='switch_active(this)'>
<h2>1</h2>
<div class ='hidden'>a</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>
You can easily fix the vertical alignment by adding
"vertical-align: top;" to your ".active" class in your CSS.
You say you don't want to use jQuery. I don't know if you are also plain javascript-phobic but if not, I would suggest use simple javascript since that is the easiest way. If you want to keep focussing on CSS, one way to do it is to make them checkboxes or radio buttons (depending on the effect you are looking for), making the checkbox/radio button invisible and styling them as your divs.
Also, there is no reason to be jQuery-phobic. It can look a bit overwhelming but the basics are really not that difficult! :)
Am having a hard time trying to figure why I cannot get the images here to change color on hover. The images themselves are svg files and should just adopt the color. The code:
HTML:
<div class="toolTile col-md-3">
<a href="#/cards">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Manage my debit card</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/recurClaim">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>Recurring Claims</p>
</a>
</div>
And associated CSS:
.toolTile {
height: 200px;
float: left;
}
.toolTile img {
color: #ab2328;
height: 100px;
width: 93px;
margin-left: auto;
margin-right: auto;
display: block;
}
.toolTile img:hover {
color: yellow;
}
Color is related to text elements, you want border.
.toolTile img:hover {
border: Yellow 1px solid;
}
Here is a JSfiddle of it: https://jsfiddle.net/td70mqq5/
If thats not what your looking for, do some research on: svg {fill: currentColor;} (https://css-tricks.com/cascading-svg-fill-color/)
CSS does not apply across document boundaries. The CSS in your HTML will not be applied to the contents of your external SVG files.
You have to either inline the SVG in your HTML file, or you can move the styles to the SVG file(s) and change the <img> elements to <object> elements.
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen
Example:
<style> div.Style1 div img { border: 3px red solid } </style>
...
<div class="Style1" id="divMain">
<img src="http://someurl.com/someimg.jpg" /> <!--WON'T be styled-->
<div id="divSub">
<img src="http://someurl.com/someimg.jpg" /> <!--WILL be styled-->
</div> <!--End of divSub-->
</div> <!--End of divMain-->
Yes. This CSS:
div.Style1 div img {
border: 3px red solid;
}
says: apply border: 3px red solid; to all img elements within a div element, which are in turn in in another div that has Style1 as a class.
Here's a jsfiddle to demonstrate:
http://jsfiddle.net/WZ3rk/
Try this, it selects only images that are children of a div that are themselves children of the element with class Style1.
.Style1 > div > img {
border: 3px red solid
}
Yes, it is possible - try it out. Although I would use
div.Style1 div.divSub img { ... }