I have a widget on my front page that I want to use many times but with another background image. I was trying to put another element that could reproduce the behavior from CSS :after but without success. Do you know the best approach for this?
HTML
<div class="widget-2 panel no-border bg-primary widget widget-loader-circle-lg no-margin">
<div class="panel-body">
<div class="pull-bottom bottom-left bottom-right padding-25">
<br>
<h3 class="text-white">My Title</h3>
<p class="text-white hint-text hidden-md">Lorem Ipsum</p>
</div>
</div>
</div>
CSS (less)
.widget-2 {
&:after {
background-image: url("#{assets-url}/img/social/person-cropped.jpg");
}
}
Result
Widget with backgroud-image
I would do it this way ... CSS only
HTML
<div class="widget-2...." style="background-image: url(...); ">
....
</div>
CSS
.widget-2 {
background-size: 0;
}
.widget-2:after {
background-image: inherit;
}
And of course one can have the resources as classes, if one feel that is more convenient than in markup
HTML
<div class="widget-2 img1 ....">
....
</div>
CSS
.img1 {
background-image: url(...);
}
.widget-2 {
background-size: 0;
}
.widget-2:after {
background-image: inherit;
}
Related
I have the following:
As you can see, there is some css that needs to change the image when a user hovers over it.
.dashboard-card-content:hover .right-arrow a {
background-color: #29b1e9;
}
.dashboard-card-content:hover .right-arrow a svg path {
stroke: #fff;
}
<div class="white-container dashboard-card-content">
<div class="gLoader-img">
<img src="assets/images/comp-switch-logo2.png" alt="">
</div>
<div class="gloaderSvg-wrapper"></div>
<div class="dashboard-card-header-content">
<h5>Policy Maintainance</h5>
</div>
<div class="dashboard-card-footer-content">
<div class="right-arrow">
<a href="#">
<img src="assets/images/right-icon.svg" class="svg" alt="">
</a>
</div>
</div>
</div>
The normal state is as desired.
The on hover state is not as desired. It is making the buttons background light blue as desired, but it does not make the arrow white.
This is the desired look on hover.
Question
How do I change the above htlm/scss to allow the image to turn white when a user hovers over it?
i think there is no way to do that with color and you can use ways like this below
.icon {
display: inline-block;
width: 70px;
height: 70px;
background-size: cover;
}
.icon-arrow {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg);
}
.icon-arrow:hover,
.icon-arrow:focus {
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
<div>
<span class="icon icon-arrow"></span>
</div>
Use object tag instead of img tag.
This is one of example.
.svg {
display: inline-block;
width: 70px;
height: 70px;
background-size: cover;
}
.svg:hover {
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
<object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" class="svg">
Bike
</object>
You should try playing with the fill css attribute. This will work on your arrows as I think they are shapes. This is the SVG counterpart to background-color. You might need to use classes or identifiers in the SVG to target only the arrows...
If that does not work, better show us the SVG so we can help a bit more.
i want to use whatsapp emojis as icons in my website.
i need the url of website or the link of css to get whatsapp emojis as icon
Here is the link of CSS
link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"
These are the classes:
https://afeld.github.io/emoji-css/
you can see this page https://afeld.github.io/emoji-css/ maybe i can help u..or u should search this page or u should search this code.
<!-- The wrap for everything, so you can position it wherever.
Also, so all the other elements are siblings. -->
<div class="emoji-toggle emoji-travel">
<!-- The input is first, so the ~ selector can select siblings after it. -->
<input type="checkbox" id="toggle2" class="toggle">
<!-- The emoji is a psuedo element on this. -->
<div class="emoji"></div>
<!-- This is absolutely positioned over everything.
Also, the split/label comes from using both :before and :after -->
<label for="toggle2" class="well"></label>
</div## Heading ##
And then try for css this code.
#mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
.toggle {
~.emoji:before {
content: $leftEmoji;
}
&:checked {
~.emoji:before {
content: $rightEmoji;
}
}
~label {
&:before {
content: $leftLabel;
}
&:after {
content: $rightLabel;
}
}
}
}
// Usage
.emoji-happy {
#include emojiType(
"\01F604", "\01F620", "Happy", "Mad"
);
}
you can use this image as background and set position for the emoji you want to use for exemple this is called the CSS IMAGE SPRITES see this
.emojis{display:inline-block;width:100%;height:100%;}
.smile,.sad,.cry,.slipy,.angry,.emoji1,.emoji2,.emoji3{
background-image : url(https://i.stack.imgur.com/Xrdcg.jpg);
display:inline-block;
background-repeat:no-repeat;
width: 183px;
height: 150px;
overflow: hidden;
text-indent: -9999px;
}
.smile {
background-position: -31px 0;
}
.sad {
background-position: -1387px -500px;
}
.cry {
background-position: -354px 0px;
}
.angry {
background-position: -177px -339px;
}
<div class="emojis" >
<div class="smile"></div>
<div class="sad"></div>
<div class="cry"></div>
<div class="slipy"></div>
<div class="angry"></div>
<div class="emoji1"></div>
<div class="emoji2"></div>
<div class="emoji3"></div>
</div>
So, for the past hour I've being trying to move this image using the css property position. My problem is every time I move it using top or bottom it doesn't work correctly. Here's a screenshot of it before using said properties and after. Below you can find my html & css. Lastly, this position has to be absolute or the image completely disappears.
HTML
<section class="row posts">
<div class="col-md-6 col-md-offset-3">
<header><h3>What others have to say...</h3></header>
#foreach($posts as $post)
<article class="post" data-postid="{{ $post->id }}">
<p>{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->user_name }} on {{ $post->created_at }}
</div>
<div class="interaction">
|
Dislike
#if(Auth::user() == $post->user)
|
Edit |
Delete
#endif
</div>
</article>
#endforeach
</div>
</section>
CSS
.heart{
background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
background-position: left;
background-repeat: no-repeat;
height: 50px; width: 50px;
cursor: pointer;
position: absolute;
left: 12px;
bottom: 5px; //This or 'top' is what causes my entire problem
background-size:1450px;
}
.heart:hover {
background-position: right;
}
How about adding this :
.interaction {
position: relative;
}
I think you should put the no-repeat at the same line as the background
It just work for me,i don't know why
https://jsfiddle.net/moongod101/2wh6b9rq/
I have this code HTML:
<div id="top"></div>
<div id="mid" style="display:none;">
<div class="close">INCHIDE X</div>
<p id="first_paragraph">
TEXT
</p>
</div>
This is code CSS:
#top {
margin: auto;
width: 400px;
height: 38px;
background: url(images/DESPRE-NOI.png) no-repeat;
}
body.page-id-10#top {
display:none;
}
I want to #top deactivation of the page in wordpress which has ID 10.
I tried but unfortunately does not work ... Can you tell me please what is wrong?
This is the site:
www.avocat.dac-proiect.ro/wp
Thanks in advance!
You can do something like this to give you hooks (for JavaScript or CSS) on #top depending whether or not you are on the page with ID 10.
<?php
if(is_page(10)) {
<div id="top" class="top-inactive"></div>
} else {
<div id="top" class="top-active"></div>
}
?>
You need to use a child or descendant selector:
Child body.page-id-10>#top
Descendant body.page-id-10 #top
Hi I am wondering how it's possible to link a hover event to change a related element. For example, I want to make it so that hovering over the link or the icon, it will change the styling of both of them at the same time. Right now in my sass/scss I have CSS:
.iconlinks {
color:$linkscolor;
&:hover {
color:darken($linkscolor,20%);
}
}
#icons {
a:hover {
i {
color: darken($primary-color, 20%);
}
}
}
HTML:
<div id="icons" class="row">
<div class="medium-4 large-4 text-center column adjust">
<i id="promotional" class="fi-calendar"></i>
<h4><a class="iconlinks" href="#">text</a></h4>
<p>Text ect</p>
</div>
</div>
So, I would like hovering over the .iconlinks or the #icons will change the styling for both.
I have heard about using pseudo elements like :before and :after, but i haven't really understood their usage and if they're applicable. So, what would be the best way to accomplish this?
I also tried:
<div class="medium-4 large-4 text-center column adjust">
<a class"dualhover" href="#"><i id="promotional" class="fi-calendar"></i>
<h4><a class="iconlinks" href="#">Promotional Items</a></h4></a>
css:
.dualhover:hover{
#promotional{color: darken($linkscolor,10%);}
.iconlinks{
color: darken($linkscolor,10%);
}
}
my code is starting to get messy, and i need to clean up. There has to be an easier way to do this.
If you're hovering #icons, you're hovering the whole block (and implicitly .iconlinks). So you don't have to care about .iconlinks:hover status:
#icons {
.iconlinks {
color:$linkscolor;
}
&:hover {
.iconlinks {
color:darken($linkscolor,20%);
}
a i {
color: darken($primary-color, 20%);
}
}
}