I got a slider which has a couple of anchor elements (with .rslides_nav.next & .rslides_nav.prev) to recreate arrows and allow user to navigate. I must make these arrows invisible until the user is on:hover on the slider. So I use display: none.
EDIT to put the solution: It is not possible to hover on an element that has display: none; better use visibility: hidden; as suggested in the accepted answer.
CSS:
.rslides_nav.next {
display: none;
}
.rslides_nav.prev {
display: none;
}
And then I add the class mostrar_navs via Jquery with:
$('#metaslider').hover(
function(){
$('.rslides_nav.next').addClass('mostrar_navs'),
$('.rslides_nav.prev').addClass('mostrar_navs')
},
function(){
$('.rslides_nav.next').removeClass('mostrar_navs'),
$('.rslides_nav.prev').removeClass('mostrar_navs')
}
);
And this css:
.mostrar_navs {
display: block !important;
}
Everything works fine until I hover the arrows (anchor). It starts to appear and disappear, so I used the following jquery.hover() which doesn't work:
$('.rslides_nav').hover(
function(){
$('.rslides_nav.next').addClass('mostrar_navs'),
$('.rslides_nav.prev').addClass('mostrar_navs')
},
function(){
$('.rslides_nav.next').removeClass('mostrar_navs'),
$('.rslides_nav.prev').removeClass('mostrar_navs')
}
);
Any idea to solve the problem?
EDIT TO ADD HTML:
<div id="metaslider_container_133">
<ul id="metaslider_133" class="rslides rslides1">
<li id="rslides1_s0" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 600ms ease-in-out;"><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-01.02.jpg.pagespeed.ic.dIb-wgR5PQ.webp" height="700" width="1600" alt="" class="slider-133 slide-164"></li>
<li style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides1_s1" class=""><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-02.02.jpg.pagespeed.ic.r1uBWZHLRw.webp" height="700" width="1600" alt="" class="slider-133 slide-167"></li>
<li style="float: left; position: relative; opacity: 1; z-index: 2; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides1_s2" class="rslides1_on"><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-03.02.jpg.pagespeed.ic.obhEqWfXEJ.webp" height="700" width="1600" alt="" class="slider-133 slide-168"></li>
</ul>
<
>
</div>
//On hover tag hide img1 and show img2
.img2 {
display:none;
}
.img1:hover + .img2 {
transition-duration:0s;
display: block;
}
Make object invisible doesn't mean put them
display: none;
Try with it
visibility: hidden;
Related
I am making a portfolio website and having trouble with something. When I hover over an image of a project, the image grows in size, has reduced opacity and a description of the project appears. However, I want to be able to add a link with the description. The problem is when I hover over the link the image returns to it's default state, meaning the image shrinks back, is opaque and the description fades away along with the link.
I have tried restructuring the javascript and css around but haven't gotten any solutions.
JavaScript:
const projectNode = (project) => {
return (
<div className="Project">
<div>
<div className="previewProject">
<img className="Project-image" src={project.image} alt="project-images" />
<div className="Project-info" >{project.description}<br></br>
<a className="project-link" href={project.github}>GITHUB</a>
</div>
</div>
</div>
</div>
)
}
//CSS//
.previewProject {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.Project-image {
opacity: 1.0;
filter: alpha(opacity=40);
transition: transform .3s;
border: solid 3.5px #606060;
/* Animation */
margin: 50px auto;
position: relative;
top: 0;
left: 0;
}
.Project-image+.Project-info {
opacity: 0;
transition: opacity 0.3s;
}
.Project-image:hover {
opacity: 0.2;
filter: alpha(opacity=100);
transform: scale(1.25);
}
.Project-image:hover+.Project-info {
opacity: 1;
color: black;
}
.Project-info {
font-family: 'Lato', sans-serif;
font-size: 21px;
width: 25%;
position: absolute;
pointer-events: none;
}
.project-link {
pointer-events: auto;
}
Your animation should relate to hovering on the parent .previewProject, so something like this:
.previewProject:hover .Project-image {
/* Do whatever */
}
I want to implement the following tiny drop down menu into my project.
Is there anything inherently wrong with my code? I attempted the :hover pseudo via CSS but was unsuccessful. Is there a better way to JS this thing?
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.querySelector('.dropdown-content').style.visibility = 'visible'
})
document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
document.querySelector('.dropdown-content').style.visibility = 'hidden'
})
.dropdown {
display: flex;
align-items: flex-start;
}
.dropbtn {
background-color: darkslategray;
color: white;
padding: 6px 10px 6px;
font-size: 18px;
border: none;
cursor: pointer;
}
.dropdown-content {
background-color: darkslategray;
display: inline-grid;
visibility: hidden;
padding: 6px 10px 6px;
}
img {
margin: 3px;
height: 40px;
width: 120px;
border: 1px solid gray;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
<img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt="">
<img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt="">
</div>
</div>
Codepen: https://codepen.io/HelleFl/pen/KyWYYX
Although there are several posts describing how to create a dropdown menu using just HTML and CSS, I'll try to answer your question.
tl;dr: Use CSS over JS for better performance
CSS or JS? Which one is better?
Basically whenever possible, use CSS over JS. There is a great SO answer about this here.
Going further, CSS animations should be preferred over JS animations unless the animation should have some advanced effects. There is a good google developers blog post on this as well.
How to create a dropdown menu
You can find the answer here. Basically you need to set the :hover onto the parent element, that holds both the link and submenu.
li img {
width: 120px;
height: auto;
}
ul > li {
display: inline;
position: relative;
min-width: 150px;
}
/* hide submenus by setting the max-height to 0 */
ul > li > ul {
max-height: 0;
overflow: hidden;
transition: max-height .75s ease;
}
/* set max-height to an approximate height it could have */
ul > li:hover > ul {
max-height: 300px;
}
ul.submenu {
background: #eee;
position: absolute;
left: 0;
top: 1em;
}
ul.submenu > li {
display: block;
}
<nav>
<ul>
<li>Hyperlink 1</li>
<li>
Hyperlink 2
<ul class="submenu">
<li><img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""></li>
<li><img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""></li>
<li><img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""></li>
</ul>
</li>
</ul>
</nav>
I guess you was facing the same issue that I was facing when I checked your codepen, since the .dropbtn are in the same level as .dropdown-content, the selector .dropbtn:hover .dropdown-content wont work since its searching for a child inside .dropbtn, so you have to use the sibling selector:
.dropbtn:hover ~ .dropdown-content{
visibility: visible
}
(CSS animation its better than Javascript)
Also, a good practice in Javascript is to save the DOM element into an variable if you will use it multiple times, so you dont have to search for the DOM element again:
var dropBtnDOM = document.querySelector('.dropbtn');
var dropdownContentDom = document.querySelector('.dropdown-content');
dropBtnDOM.addEventListener('mouseenter', function(){
dropdownContentDom.style.visibility = 'visible'
})
dropBtnDOM.addEventListener('mouseleave', function(){
dropdownContentDom.style.visibility = 'hidden'
})
.dropdown:hover .dropbtn ~ .dropdown-content{
visibility: visible
}
I am trying to display an overlay onto my radio button images. So far I can create a border for the selected image but I cannot get a background image to overlay in front. Here is my code:
HTML/AngularJS:
<div class="row">
<label class="col-sm-4" ng-repeat="size in sizes">
<input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
<img class="img-thumbnail" src="{{size.url}}">
<img class="overlay" src="images/greenCheck.png">
</label>
</div>
CSS:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
.overlay {
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 1;
}
This is what I have currently:
Before I click on a radio button.
After I click on a radio button.
I want the check marks to only appear when selected.
Set the opacity for the overlay to 1, when the radio is checked:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
.overlay {
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 0;
}
input[type=radio]:checked ~ .img-thumbnail + .overlay {
opacity: 1;
}
This makes for a great possibility to make a transition for the checkmark to fade in, adding a transition to the .overlay, as the overlay is already in place just hidden, and when adding opacity: 1; the checkmark will fade in, if there is specified a transition.
All you need to do is add the input[type=radio]:checked selector to your .overlay too, i.e.:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
/* .overlay { */ // <- change this....
input[type=radio]:checked ~ .overlay { // <- ...to this
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 1;
}
With your current code, you are displaying the overlay all the time, not just on selected images.
Edit: You don't need to include the image here - you already include it in your CSS so its included twice.
<div class="row">
<label class="col-sm-4" ng-repeat="size in sizes">
<input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
<img class="img-thumbnail" src="{{size.url}}">
<span class="overlay"></span>
</label>
</div>
my css:
label > input{
visibility: hidden;
position: absolute;
}
label > input + img{
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{
border:2px solid #f00;
}
I have used the following code to change the size of the logo when scrolling down the page.
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo img').css('width', '50px');
} else {
$('.logo img').css('width', '');
}
});
.nav {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav .logo {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
opacity: .5;
}
.container {
padding-top: 120px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/100x100" alt="" />
</div>
</div>
<div class="container">
Lorem ipsum
</div>
I would like the transition to be smooth from large to small.
https://jsfiddle.net/sL89qxcx/
Is there something I can add to achieve a smooth transition?
The best way to achieve this would be to use CSS transitions, as they are hardware accelerated, and also a better separation of concerns. You can then toggle the animation by adding/removing a class in the JS.
The important part is to add both a width and transition rule to the default state of the .logo img element. You can then amend that width in the added class. Try this:
$(document).on('scroll', function() {
$('.logo img').toggleClass('small', $(document).scrollTop() >= 10);
});
.nav {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav .logo {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
opacity: .5;
}
.nav .logo img {
width: 100px;
transition: width 0.3s;
}
.nav .logo img.small {
width: 50px;
}
.container {
padding-top: 120px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/100x100" alt="" />
</div>
</div>
<div class="container">
Lorem ipsum
</div>
Some pointers for you:
Avoid setting styles using .css() as a general rule (exceptions apply, of course). Instead, consider defining a class in your CSS, eg. .small-logo {width:8%}, and use .addClass() instead.
This has the convenient side-effect that if the class is already added, it won't be added again.
In turn, this allows you to set transition: width 0.4 ease-in-out; or similar on your logo's styles. This will provide the smooth transition you're asking for.
CSS is fun!
I'm trying to move the caption, what's in data-title, from underneath the image to the right of the image.
I don't know HTML/CSS very well, but it seems to me like the image is contained in the div .lb-outerContainer, and the caption is in the div .lb-dataContainer in the Lightbox CSS. I tried removing the clear: both from the ::after for outerContainer and adding display: inline-block to the two divs, but it didn't work. The image moved to the left but the caption didn't move up.
Does anyone have any advice? Thank you :)
You'll have to put some custom css styling, also add a inner div in js file like following example code.
Find in js file -
"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>"
And Replace With(copy without Quats) -
"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="new-inner-div"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div></div>"
New Style on page -
<style>
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
font-weight: 400;
max-width: 100%;
margin: 0 auto;
}
.new-inner-div
{
max-width: 700px;border: 1px solid red;margin: 0 auto;min-height: 346px; background: #fff;
}
.lb-outerContainer
{
width: 50% !important; height: auto !important;float: left;
}
.lb-dataContainer
{
float: right;width: 46% !important;
}
.lb-data .lb-close {
display: block;
float: left;
width: 30px;
height: 30px;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.lb-image
{
width:100% !important;
}
</style>