I'm using a Bootstrap template that flips the navbar between white and transparent on hover and on scrolling.
I have a logo image in the Navbar like so.
<a href="/" class="navbar-brand">
<img width="100px" src="/assets/logo.png" />
</a>
I'd like to be able to load a different logo when the navbar is transparent compared to when it is white.
I've seen a number of different solutions for doing this outside of Bootstrap but there must be a simpler way to achieve this using Bootstrap classes.
I need to have both image urls in the html so was thinking of something along the lines of...
<a href="/" class="navbar-brand">
<img class="logo-white" width="100px" src="/assets/logo-white.png" />
<img class="logo-dark" width="100px" src="/assets/logo.png" />
</a>
But then how can I do something with those new classes based on the set bootstrap classes?
I don't think this is possible with just Bootstrap classes but you could use CSS to toggle the display attribute of the images when the parent navbar is in a hover state:
/* initial states */
.logo-off {
display: block;
}
.logo-on {
display: none;
}
/* hover states */
.navbar:hover .logo-off {
display: none;
}
.navbar:hover .logo-on {
display: block;
}
Here's a codepen.
with thanks to Jacob, my full CSS solution is as follows...
/* initial states */
.logo-light {
display: block;
}
.logo-dark {
display: none;
}
/* hover states */
.navbar:hover .logo-light {
display: none;
}
.navbar:hover .logo-dark {
display: block;
}
/* scroll states */
.navbar.fixed-top .logo-light{
display: none;
}
.navbar.fixed-top .logo-dark{
display: block;
}
Related
so i'm very new to web development and can't find anything online about the issue i'm having. I'm basically just trying to change a hover function on 4 logo's i've inserted into the web page i'm working with. All image are PNG's with a plain white colour and a transparent background (I converted it myself in Photoshop). However, i'm trying to use the hover function on each image so it turns to a grey(ish) shade but for some reason the white colour doesn't change but the background colour does, when I only want the white part of the image to change to the slightly darker shade. Any help would be much appreciated.
Here is the HTML (just in case it's needed)
<!-- social media bar -->
<div class="socials">
<!-- instagram link -->
<div class="instaBox" id="socialBox">
<a href="#">
<img src="/assets/instaLogo.png" alt="Instagram Logo" class="instaLogo" id="socialsLogo">
</a>
</div>
<!-- tiktok link -->
<div class="tiktokBox" id="socialBox">
<a href="#">
<img src="/assets/tiktokLogo.png" alt="tiktok logo" class="tiktokLogo" id="socialsLogo">
</a>
</div>
<!-- youtube link -->
<div class="youtubeBox" id="socialBox">
<a href="#">
<img src="/assets/youtubeLogo.png" alt="YouTube Logo" class="youtubeLogo" id="socialsLogo">
</a>
</div>
<!-- vimeo link -->
<div class="vimeoBox" id="socialBox">
<a href="#">
<img src="/assets/vimeoLogo.png" alt="Video Logo" class="vimeoLogo" id="socialsLogo">
</a>
</div>
</div>
And here is the CSS
/* social media bar */
.socials{
float: left;
width: 20%;
height: 100%;
}
#socialBox{
float: left;
width: 10%;
overflow: hidden;
margin-left: 5%;
margin-right: 5%;
}
#socialsLogo{
border: none;
width: 100%;
}
#socialsLogo:hover{
background: #b0b0b0;
}
I'll add an image of the logo's on the web page as well so you can see the issue i'm getting.
Logo's normally
Logo's with the hover effect
You can use filter
If your goal is to change the icons lines colors, then use svg images and change their color
img { transition: filter .25s ease-out }
img:hover { filter: grayscale(.5) }
<img src="https://placekitten.com/200/300" />
According to your screenshot, your icons apparently have transparency.
I also assume your html body or parent element has a black background color.
You could actually just change the opacity to emulate a gray icon color.
As an alternative you could also change contrast.
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
body {
background-color: #000;
}
.socialBox {
text-align: center
}
.socialLink {
background-color: #000;
color: #fff;
display: inline-block;
text-align: center;
width: 1em;
height: 1em;
font-size: 5em;
}
.socialLink img {
width: 100%;
}
.socialLinkFontAwesome {
color: #fff;
}
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
.socialLink:hover .icon-img2 {
opacity: 0.5;
}
.socialLinkFontAwesome:hover {
color: #999;
}
/* just for adjusting example icon sizes */
.svg-inline--fa {
height: 1em;
font-size: 0.75em;
vertical-align: 0.125em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<!-- tiktok link -->
<p class="socialBox">
<a class="socialLink tiktokLink" href="#">
<img class="icon-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink tiktokLink2" href="#">
<img class="icon-img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink socialLinkFontAwesome"><i class="fab fa-tiktok"></i></a>
</p>
Recommendations
Avoid duplicate element IDs. Better add your ids to class attribute like this:
<div class="socialBox tiktokBox">
You might also consider to use a svg/vector based icon library like fontAwesome, feather-icons etc. (see third icon example )
These libraries can simplify your development tasks and offer a superior rendering quality, since they are scalable.
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I have a giant list of images currently in an unordered list and i'm now trying to alter it to display another image over the original only when hovered and in process of that, hide the original image.
I can almost get it to work with the below code but it's only hiding the original picture and not bringing the new picture into view.
.mainImg {
opacity: 1;
}
.mainImg:hover {
opacity: 0;
}
.hidgeImg {
display: none;
}
.hideImg:hover {
display: inline-block;
}
<!-- dont know if the picture CSS is relevant but here it is -->
#pictures li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
#pictures img {
vertial-align: top;
max-height: 350px;
}
<ul id="pictures">
<li>
<a href="/"><img src="image1.jpg" class="mainImg">
<img src="image2.jpg" class="hideImg">
</a>
</li>
</ul>
I have commented the code where it is relevant to you.
You were very close, what needs to happen is you need a parent element that, when hovered over, will handle the hovering events for each of its parent images.
If you remove the ability to see mainImg on hover for example, then there is no element to be hovering over that makes hideImg display.
If you have a parent object to hover over, that is always 'displayed' (but never has any visual other than its child img) then you can handle hover events via thisparent.
This is down by specifying what is being hovered over, followed by the query/selector of the element you want to change (E.G .parent:hover .child{CSS HERE;})
<head>
<style>
//When parent is hovered voer, make main hidden and hideen displayed
#hoverelement:hover .hideImg{
display: inline-block;
}
#hoverelement:hover .mainImg{
display: none;
}
//Hide Img is hidden by default
.hideImg{
display: none;
}
<!-- dont know if the picture CSS is relevant but here it is -->
li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
img {
vertial-align: top;
max-height: 350px;
}
#MainArea{
background-color:tan;
padding:5%;
}
</style>
</head>
<body>
<div id="MainArea">
<ul id="pictures">
<li>
<a href="/" id="hoverelement"><!--Add a parent element to handle hovering -->
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="mainImg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="hideImg">
</a>
</li>
</ul>
</div>
</body>
CSS
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
I'm working on a website and I've to create a table with a mouse over effect the effect is only when you go with the mouse on the picture and only on the PDF icon.
What I need now is to apply this effect when you go with the mouse on the single table rows. How can I do it?
HTML:
<td class="thumbnail-item" data-th="PDF"><img src="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/pdf.png" alt="PDF" height="24" width="24">
<div class="tooltip">
<img src="qh_1.png" alt="" width="570" height="403" />
<span class="overlay"></span>
<span class="overlay"></span>
</div></td>
CSS :
.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
display: inherit;
height: 10px;
max-width: 5px;
}
.thumbnail-item a {
display: block;
}
.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
z-index: 500;
top: 7px;
left: -8px !important;
max-width: 570px !important;
max-height: 403px !important;
Antionio:
CSS:
.thumbnail-item {
/* delete the line that was here for inheriting the display * /
height: 10px;
max-width: 5px;
}
HTML:
<tr class="thumbnail-item white">...</tr>
<tr class="thumbnail-item grey">...</tr>
etc, etc.
You were adding the "thumbnail-item" css reference to the <td>tag which represents a cell of data. You want the "thumbnail-item" css reference to be on the entire row, so it should be on each <tr> tag instead.
In your Jquery code, use the class of your td.hover function and try with the below code.
$(".thumbnail-item").hover(function() {
//Write your js code what you have written for hover pdf image
});
It would be better for us to understand if you post your jquery code as well.