What the html looks like
My problem is at a large view the .hover looks fine, but when the screen is small the .hover stops being aligned how I'd like it.
How can I make the .hover look visibly better at smaller views?
You might want to check at which breakpoint your hover stops being the way you want it. You can toggle a :hover in your inspector to see at which width the hover div is not in the desired position anymore.
After you know at what width the div is misplaced, you could add media queries. In that query where you say (max-width: 1000px){} you could change the margin of the hover div.
I think what you could do is place the .hover element into the element that triggers it to show. The .hover element then needs to be positioned absolutely inside of an element that is not position:static;
The benefit of having the hover content inside of a container together with the label means that they move around together when the page gets resized.
You can change where the .hover appears based on the media query.
HTML:
<div class="container">
<div class="label">Label</div>
<div class="hover-content">This is the hover</div>
</div>
CSS:
.container {
position: absolute;
top: 100px;
left: 300px;
border: 1px solid #000;
}
.hover-content {
position: absolute;
top: 0;
left: 100%;
margin-left: 20px;
display: none;
}
.label {
padding: 10px;
}
.container:hover .hover-content {
display: block;
width: 200px;
background-color: #000;
color: #fff;
padding: 10px;
}
#media (max-width: 600px) {
.hover-content {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 20px;
}
}
http://codepen.io/anon/pen/XjobdN
Related
I don't know how to make the div display in front of the h1 text, so that the blue box is in front of the text? I have been stuck on this for the past 30 mins and cant resolve it in my head. I am a beginner so please have patience.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper2 {
position: absolute;
z-index: 2;
width: 500px;
height: 250px;
background: blue;
}
h1 {
position: relative;
z-index: 0;
}
<div class="wrapper2">
<h1>Welcome</h1>
</div>
As mentioned above, you can simply put the <h1> element above your wrapper in HTML. If you want your <h1> to stay inside, you could use this:
display: none; or visibility: hidden; opacity: 0;
CSS:
h1 {
position: relative;
/* either of these */
display: none;
visibility: hidden;
opacity: 0;
}
You could try this:
.wrapper2 {
width: 500px;
height: 250px;
background: blue;
}
<div class="wrapper2"></div>
<h1>Welcome</h1>
Although then it's not really a "wrapper" anymore, so maybe you'll need to create an element just for the blue square.
You've placed your h1 inside the wrapper2, so you can try to move it after it if you want to style them separately. I would also suggest to not use absolute position unless you really want this, the consequences of doing this will quickly become apparent as you build out a larger page.
You can make each element "inline" rather than "block", this will make them follow the text flow of the page: display: inline;
new to webdev so bear with me. I am developing a prototype of a Messaging Application, I have most of the basics worked out and I'm trying to add the little touches to make it feel nicer to use. I'm trying to make it so that when an individual message is hovered over, the time that message was sent will slide out from the message.
Here is my code at the moment: http://codepen.io/RBrNx/pen/GNzOWr
(Note: Click on "Toni" again and his message will appear, small bug. You can also send messages from the text box).
Now here are some images showing what I mean:
http://imgur.com/a/elB04
Ideally I think the 2nd one would look better.
I tried to implement it by adding a span inside the bubble like so:
<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>
.hover-time{
position: relative;
left: 60px;
}
But that made the inside of the bubble stretch to account for the Span.
How can this be done?
EDIT: Thanks to Antidecaf I managed to get the left side working and figured out the right hand side as well. Here is the CSS I added:
.container .right .bubble.you .hover-time {
display: none;
position: absolute;
left: 110%;
color: #999;
width: 100px;
}
.container .right .bubble.me .hover-time {
display: none;
position: absolute;
right: 90%;
color: #999;
width: 100px;
}
These deal with the left hand messages (from the person you are messaging) and the right hand messages (from me). I also added:
.container .right .bubble.you:hover .hover-time{
display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
display: inline-block;
}
So that the hover-time span is shown on hover.
You can do this with the markup you suggested by positioning .hover-time relative to .bubble. To do this, add position: relative to .bubble and position: absolute to .hover-time. Here's some more info on the technique.
<div class="bubble you"><span class="hover-time">13.45</span>Test Message</div>
CSS for positioning timestamp to the right:
.bubble {
position: relative;
}
.hover-time {
position: absolute;
left: 110%;
color: #999;
}
Same approach goes for positioning it to the left, but in this case you'll need to add a bit of margin to the bubble in order to free up space for the timestamp:
.bubble {
position: relative;
margin-left: 50px;
}
.hover-time {
position: absolute;
left: -50px;
color: #999;
}
<style>
.hover-time {
position: relative;
left: 60px;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Works for me. You'll probably want to spice it up a little with some transform or other fancy anim stuff.
EDIT: Perhaps you meant like so:
<style>
.bubble {
border: 1px solid #ccc;
width: 300px;
}
.hover-time {
float: right;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Border and width just to have a visual guide.
Maybe I'm misunderstanding, but are you styling the DIV as the speech bubble, then taking the span inside the div and telling it 'but not you buddy, you are special'?
If so, isn't it cleaner and less headaches to put your text message in a span also, styling the span as text bubble, and keeping the div as an invisible structural element?
I want to make responsive image gallery. That will display extended image on thumbnail hover. Gallery can't use any JS this is requirement.
But there is 1 little problem. Gallery needs to be responsive.
That means expanded image have to be the same size as the default image that is responsive and resize on smaller devices.
Here is my html code
<div class="container"></div>
<div class="container">
<div id="gallery-photo-container">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/60BBDre.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/TWLJOVv.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/TWLJOVv.jpg">
</div>
</div>
</div>
</div>
Absolute approach
I have almost done it, using absolute position and positioning with top attribute. But on resize expanded image is the size of left container beginning to the right end of the page.
Here is my DEMO1 and CSS.
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
max-width: 100%;
}
.gallery-main-image {
position: absolute;
visibility: hidden;
top: 18px;
left: 18px;
margin-right: 8px;
}
.container {
width: 50%;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
}
Relative approach
I think it can be done it too, by using relative position and positioning with bottom attribute. But here the problem is that thumbnail image container is resizing to the expanded image size on hover. And the bottom attribute value is screen size dependent.
In this DEMO2 you have to click on a thumbnail because they are jumping. And here is CSS for relative approach.
.gallery-thumbnail-image:hover > .gallery-main-image {
display: block;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
width: 100%;
}
.gallery-main-image {
position: relative;
display: none;
bottom: 373px;
}
So, could it be done responsive way with one of these two approaches? Or maybe you have another idea. I'm looking forward for your help.
See this update of your plunk.
https://plnkr.co/edit/6EOKiKEQcxDiuIXApPLo?p=preview
the main changes are here:
.gallery-main-image {
position: absolute;
display: none;
top: 10px;
left: 10px;
right: 10px;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
position: relative;
}
Use of an absolute element positioned within relatively positioned element.
You need a margin-right: 8px;, because of the top: 8px; left: 8px; Plunkr:
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
margin-right: 8px;
}
Slightly off-topic, but... just in case you're interested in simulating an onclick event with CSS, see this SO answer.
I currently have a div called testLine used for displaying a color triangle effect using css:
#testLine {
width: 0;
height: 0;
padding-bottom: 47.5%;
padding-left: 47.5%;
overflow: hidden;
}
#testLine:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -1000px;
border-bottom: 1000px solid transparent;
border-left: 1000px solid #4679BD;
}
This works fine but the issue is the following:
How can I do to have a text over that triangle? I mean, I've tried with z-index but with no success (css it is not my strong point) and I didn't know if it is even possible to write text on it. What can be other possibilities? (I really don't want to use a resource consuming image for the background). I really appreciate any help that can lead me to a solution.
PrintScreen - http://i.imgur.com/dRCKVNO.jpg
edit, html code:
<div id="testLine"></div>
<div id="text">Testing Testing</div>
use position with alignment...something like:
#text {
position: absolute;
/* this will make div fall out of
page flow anad align to viewports dimension*/
top:0;
/* position to top*/
left:20px;
right:0
/*if needed*/
bottom:0
/*if needed*/
}
working demo
Use z-index with a position property, for example:
#testLine {
position: relative;
z-index: 9999;
}
Without position property z-index not work
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>