I have 3 elements that are displayed when hovering on the img element.
the problem is that when I hover over the icons, hovering over image disrupts and icons start flashing.(hovering happens back and forth between image and icon)
I know that I can add some class like this:
.dark-shield {
pointer-events: none;
}
to icons, and it fixes it but then I wont be able to apply the click event.
I appreciate if someone can help.
here is my code for display bellow:
.invisible {
visibility: hidden;
}
<div class="container transition-3d-hover ">
<a href="{% url "gallery-post" post.id %}">
<img id="{{ post.id }}" class="rounded "
src="{{ post.photo.url }}"
onmouseenter="f(this)"
onmouseleave="f(this)"
>
</a>
<i id="complain-icon-{{ post.id }}"
class=" fas fa-angry complain-box invisible icon-big dark-shield"></i>
<i id="fav-icon-{{ post.id }}"
class=" fa fa-hand-point-up like-box invisible icon-big "></i>
<i id="score-icon-{{ post.id }}"
class=" fas fa-heart fav-box invisible icon-big "></i>
</div>
<script>
function f(e) {
var complain = "#" + "complain-icon-" + e.id
var fav = "#" + "fav-icon-" + e.id
var score = "#" + "score-icon-" + e.id
$(complain).toggleClass('invisible')
$(fav).toggleClass('invisible')
$(score).toggleClass('invisible')
}
</script>
In your code, as you can see, the icons are not a part of the image. So, the icons become invisible when you hover them. After they are invisible, you hover over the image again, and the icon becomes visible. This keeps repeating. So, here is a code snippet that would solve this issue:
.img1 {
width: 100%;
height: 100%;
}
.icon {
color: white;
font-size: 30px;
position: absolute;
top: 40%;
left: 40%;
display: none;
}
#wrapper {
float: left;
width: 50%;
height: 30%;
cursor: pointer;
}
#wrapper:hover .icon {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div id="wrapper">
<img src="https://cdn.mos.cms.futurecdn.net/wtqqnkYDYi2ifsWZVW2MT4-1200-80.jpg" class="img1">
<i class="fas fa-angry icon"></i>
<i class="fa fa-hand-point-up icon" style="top: 20%;"></i>
<i class="fas fa-heart icon" style="left: 10%; top: 20%;"></i>
</div>
</body>
</html>
Please note: This code might not work in the snippet, but it would work if you create a new file with this code.
Code explained
As I have already explained, the icons are not a part of the image. So, when you hover them, they become invisible. However, in my code, I have inserted the images, as well as the icons inside one div. Now, whenever you hover the div, the icons are visible. Since the icons are a part of the same div, they would remain visible.
Related
I'm using bootstrap-icons, which does not yet have an "unsorted" icon like this:
So I'd like to stack two separate icons to achieve that effect:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet">
<span class="d-inline-block position-relative" style="height: 1rem; width: 1rem;">
<i class="bi bi-caret-up position-absolute" style="font-size: 1rem; top: -5px;"></i>
<i class="bi bi-caret-down position-absolute" style="font-size: 1rem; top: 5px;"></i>
</span>
Run that code snippet, and open it in your browser's devtools - you'll notice the parent wrapper does not properly fit the contents. The parent <span> is smaller than the individual <i> icons. So when used in a table header cell (and other places too), it sometimes looks weird.
How could I fix this?
I have fiddled with your code and learned that:
the main span (class .unsorted) has to clip excess character spacing with overflow: hidden
line-height is already set to 1 by bootstrap for icons.
by default bootstrap icons have vertical-align: -0.125rem causing a slight shift up. I circumvented this by making the icons (<i>) display: grid, which also positions the characters nicely inside .unsorted.
A reasonable up/down offset for the characters seems to be 27.35%.
Additionally I introduced a few CSS custom properties to test various sizes of the combined character: sm, md, xl.
I know too little of bootstrap to be any use with that, so I created a vanilla CSS solution that seems to work with your bootstrap code.
snippet
/* * { outline: 1px dashed } /* for debugging */
body {
margin: 0;
min-height: 100vh;
display: grid; place-items: center;
}
.unsorted { background-color: rgb(128,128,128,.4) }
/********/
/* DEMO */
/********/
/* A few sizes to test variations */
.unsorted.sm { --button-size: 1em }
.unsorted.md { --button-size: 5em }
.unsorted.xl { --button-size: 9em }
.unsorted {
overflow: hidden; /* [MANDATORY] */
font-size: 1rem;
height: var(--button-size);
width : var(--button-size);
--icon-offset: 27.35%;
}
.unsorted i {
display: grid; /* centers the characters */
font-size: var(--button-size);
}
/* up/down offset, made to use positive numbers */
.bi.bi-caret-up { bottom: var(--icon-offset) }
.bi.bi-caret-down { top : var(--icon-offset) }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet">
<div>
<span class="d-inline-block position-relative unsorted xl">
<i class="bi bi-caret-up position-absolute" ></i>
<i class="bi bi-caret-down position-absolute"></i>
</span>
<span class="d-inline-block position-relative unsorted md">
<i class="bi bi-caret-up position-absolute" ></i>
<i class="bi bi-caret-down position-absolute"></i>
</span>
<span class="d-inline-block position-relative unsorted sm">
<i class="bi bi-caret-up position-absolute" ></i>
<i class="bi bi-caret-down position-absolute"></i>
</span>
</div>
i am beginner in html and css and when i was trying to build this web page with it (html and css) ,the images always appears in the middle of the tab and i don't know how to organize it,
stackoverflow keep saying "It looks like your post is mostly code; please add some more details" i have nothing more to say lol , so thank you in advance:)
this my html code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>HOME</title>
</head>
<body>
<div class="mytabs">
<input type="radio" id="tabfree" name="mytabs" checked="checked">
<label for="tabfree">Free</label>
<div class="tab">
<h2>Free</h2>
<p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as quantity (number theory),[1] structure (algebra),[2] space (geometry),[1] and change (mathematical analysis).[3][4][5] It has no generally accepted definition.[6][7]
Mathematicians seek and use patterns[8][9] to formulate new conjectures; they resolve the truth or falsity of such b
h
.</p>
</div>
<input type="radio" id="tabsilver" name="mytabs">
<label for="tabsilver">Ser</label>
<div class="tab">
<h2>Sr</h2>
<p>jctivity from as far back as written records exist. The research required to solve mathematical problems can take years or even centuries of sustained inquiry.
Rigorous arguments first appeared in Greek mathematics, most notably in Euclid's Elements.[10] Since the pioneering work of Giuseppe Peano (1858–1932), David Hilbert (1862–1943), and others on axiomatic systems in the late 19th century, it has beco.</p>
</div>
<input type="radio" id="tabgold" name="mytabs">
<label for="tabgold">Gd</label>
<div class="tab">
<h2>Gd</h2>
<p>slow pace until the Renaissance, when mathematical innovations interacting with new scientific discoveries led to a rapid increase in the rate of mathematical discovery that has continued to the present day.[11]l
</p>
</div>
<!--
IMAGES
-->
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid2.jpg' >
<div class="image-text">
<h1>bride</h1>
<p>hapyy bride happy life</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid1.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride happy life2</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/image.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
</body>
</html>
this is my css code:
/*tab*/
.mytabs {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 50px auto;
padding: 25px;
}
.mytabs input[type="radio"] {
display: none;
}
.mytabs label {
padding: 25px;
background: white;
font-weight: lighter;
}
.mytabs .tab {
width: 100%;
padding: 20px;
background: #fff;
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
}
.mytabs input[type="radio"]:checked + label {
background: #18ffff;
border-radius: 18px;
}
.all-image{
text-align: center;
}
.all-image .single-pic{
display: flex;
padding: 24px;
position: relative;
width: 30%;
height: 30%;
}
thank you in advance :).
Consider deleting
.mytabs .tab {
width: 100%;
padding: 20px;
background: rgb(114, 35, 35);
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
It already looks a whole lot better.
The all-image class have text-align set to center. Since you defined the class in the div element that is the parent element of your img tag, your image will be aligned to the center too.
To avoid your image being centered and I assume you only want your text to be aligned centered, try to set the CSS property text-align: center under the class image-text.
I am working on a website (built in HTML/CSS) in which I want to move the blinking cursor towards the right so that its not on the top of icon.
The snippets of HTML and CSS which I have used in order to make a search icon is:
.searchicon {
position: absolute;
left: 34.5%;
top: 22.4%;
transform: translateY(-50%);
color: red;
pointer-events: none;
}
<div class="input-searchicon">
<input class="form-control search_radius mb-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
Problem Statement:
I am wondering what changes I should make in the HTML/CSS so that I can move the blinking cursor slight towards the right so that the icon is full visible.
At this moment, the blinking cursor is all over icon as seen in the screenshot:
Use padding on the input element to adjust the position of the blinking cursor.
I have edited the code. But in your case all you need to do is add
.input-searchicon input{
padding-left: 35px;
}
That will do it. Adjust the position either by increasing or decreasing the padding.
.input-searchicon{
position: relative;
}
.input-searchicon input{
padding-left: 35px;
}
.searchicon {
position: absolute;
left: 5px;
top: 10px;
transform: translateY(-50%);
color: red;
pointer-events: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-searchicon">
<input class="form-control search_radius mb-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
Instead of changing the css of the span element (which is the Search Icon), try to change the style within the input element. Assuming you're using Bootstrap, you could add pl-1 to adjust the padding-left;
<div class="input-searchicon">
<input class="form-control search_radius mb-4 pl-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
You could visit this Jsfiddle here to see what the sample output.
Maybe it's a bug, I'm not sure, but when using the mobile collapse menu, the icons and the text are not aligned (see images).
The reason is because of these CSS properties:
HTML:
.side-nav a {
color: #444;
display: block;
font-size: 1rem;
height: 64px;
line-height: 64px;
padding: 0 30px;
}
nav i.material-icons {
display: block;
font-size: 2rem;
height: 56px;
line-height: 56px;
}
<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
<img src="images/costum_logos/logo3.png" class="custom-logo">
<div class="divider"></div>
<a href="index.php" class="waves-effect waves-light">Albums
<i class="material-icons left notranslate">collections</i>
</a>
<a href="?page=settings" class="waves-effect waves-light">Settings
<i class="material-icons left notranslate">settings</i></a>
<a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
<i class="material-icons left notranslate">power_settings_new</i>
</a>
</ul>
Of course, the interesting bits are the line-height and height properties on both the anchor tag, and the icon tag. They are not equal. If I override either one of them, to be exactly like the other - they are perfectly aligned.
My question is: Am I doing something wrong? I can easily get around it, but I want to have a good practice with materialize CSS. Don't wanna hack around and break their conventions.
Thanks in advance!
I’m using a combination of icons and text for some links in the sidebar on my website, but I want both the icon and text to change if the mouse hovers over either of them. Using MouseOn and ‘hover’ in my CSS file, I’ve managed to get this to work when the mouse hovers over the icon, but if the mouse only hovers over the text, only the text changes but not the icon as well. Does anybody know a way to do this please? A link to my site and the code I’m currently using are below. Thanks everybody.
http://www.retelevise.com
<span class="social-media-sidebar-panel">
<a href="https://www.facebook.com/re.televise" target="_external window fa">
<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/
socialmedia-facebook-1.png"
onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-2.png'"
onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-1.png'"
class="social-media-sidebar-icons" title="Facebook" alt="Facebook">
<span style="font-size: 0.8em">Facebook</span></a></span>
try moving your onmouseover and onmouseout events to anchor and change the 'this.' to reference the img by ID.
I've made several changes to the way you've done this:
Moved your styling and javascript to external files
Used JQuery for animations (simply easier)
This version now makes use of multiple images.
JSFiddle DEMO
HTML:
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/4477ee/ffffff" src="http://placehold.it/60/224499/ffffff"/>
<div class="mediaText"> Facebook</div>
</a>
</span>
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/ee9933/ffffff" src="http://placehold.it/60/777777/ffffff"/>
<div class="mediaText"> Stack Overflow</div>
</a>
</span>
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/66aaff/ffffff" src="http://placehold.it/60/3388aa/ffffff"/>
<div class="mediaText"> Twitter</div>
</a>
</span>
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/dd1122/ffffff" src="http://placehold.it/60/991122/ffffff"/>
<div class="mediaText"> YouTube</div>
</a>
</span>
JavaScript (Using JQuery):
$(document).ready( function() {
$(".mediaLink").on( {
mouseenter: function() {
$(this).children(".mediaPic").data("static", $(this).children(".mediaPic").attr("src"));
$(this).children(".mediaText").css("color", "orange");
$(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("hover"));
}, mouseleave: function() {
$(this).children(".mediaText").css("color", "white");
$(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("static"));
}
});
});
CSS:
.mediaLink {
display: block;
}
.mediaPic {
float: left;
width, height: 60px;
}
.mediaText {
height: 60px;
width: 150px;
padding-left: 10px;
line-height: 60px;
background: #242424;
color: white;
font-family: "Consolas"," Arial";
font-size: 18px;
float: left;
}
.sm {
margin: 5px;
float: left;
}
Explanation:
I'm making the <a> change its children (.mediaPic and .mediaText) when its being hovered over. On mouseenter is when the mouse is hovered over, and mouseleave is returning the <a> back to its regular state.
The part called data-hover is the url of the picture you wish to set the image to, where you leave src as the image you want to have as the default. When you hover over the image, the script will "remember" the original src and set it back to that when you leave the image (mouseleave).