I'm trying to achieve two things I can't figure out:
1) How to display a div when I hover over an image, ideally with a transition effect.
2) How to make the div stay up when the user shifts the mouse from the image to the div itself.
Here's my code so far; it has no transition effect and unless the div is directly next to the image, it doesn't stay up when I mouse over to it.
<style>
#Picture {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 375px;
height: 375px;
}
#content {
display: none;
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 300px;
background-color: #7377a8;
}
#Picture:hover + #content {display: block;}
#content:hover {display:block;}
</style>
<body>
<img src="" alt="Picture" id="Picture" />
<div id="Content">
Something goes here
</div>
</body>
P.S. I am sorry if I formatted anything incorrectly; I am brand new to the site.
The hover effect is not mobile-friendly (though there are more and more 'hover-sensitive' devices). To accomodate most devices I often use both :hover and :focus to 'dropdown' things. However, this requires 'focusable' elements, for which I usually use the <a>nchor tag.
But first: The point in your code is consistency as you are mix-matching lowercase and uppercase in #content and id="Content". That is why it does not work anyway.
Answering your questions:
1) make upper/lowercase consistent!
2) To create a hover with persistency, trigger the display of 'content' with a focusable 'trigger' element
On hover/click the outer <a> stays focused and therefore its sibling #content visible. On hover .shorttext its sibling .longtext will show.
On click .shorttext (actually anywhere in #content) the content box will close again as the outer <a> loses focus again.
FYI-1, attribute display is not animatable, so you will need an alternative when you need a transition on some element. In this case opacity going from 0 to 1 is used (optionally combined with width and height, from 0 to 300px).
FYI-2, using href="javascript:void(0)" instead of href="#" will prevent browers from adding an entry in their history log each click.
FYI-3 final, use CSS classes by default, these are generic making it a lot easier to copy the same behaviour in your HTML, without repeating CSS each time. IDs are specific and require you to copy equal CSS over and over.
a {
color: currentColor;
text-decoration: none
}
.picture {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 375px;
height: 375px;
}
.content {
/* display: none; remove */
opacity: 0; /* add */
transition: all 150ms ease-in-out; /* add */
position: fixed;
left: -800px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 0; /* [OPTIONAL] modify from 300px */
height: 0; /* ditto */
background-color: #7377a8;
}
.trigger:hover+.content,
.trigger:focus+.content {
/* add, for persistent display of content. click elsewhere to close again */
/* display: block; remove */
opacity: 1; /* add */
width: 300px; /* [OPTIONAL] add, see above */
height: 300px;
}
.shorttext { /* eye-candy only */
width: 100%;
text-align: center
}
.longtext {
display: none
}
.shorttext:hover+.longtext {
display: block;
}
/* little debug helper */
[outlines="1"] * {
outline: 1px dashed purple
}<body outlines="0">
<a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a>
<div class="content">
<h3 class="shorttext">short intro text, hover me</h3>
<p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</div>
</body>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments