I am creating my website portfolio and I have an image that when you click on it opens in another window but enlarged, I want to add next and previous symbols/buttons to that enlarged image so that all the other images can be viewed instead of having to go back and click on the next image etc.. This is my code so far.
<div class="grid-item">
<img src="img/6.JPG" width="440" height="180" alt="Building in Paris">
</div>
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 10px;
font-size: 30px;
text-align: center;
max-height: 200px;
max-width: 460px;
overflow: hidden;
box-sizing: border-box;
}
.grid-item > img:hover{
transform:scale(2.5);
}
Related
1- There is a tooltip that opens when hovering the cursor over the icon. But when the screen starts to shrink a little, the div starts to change position. How can I prevent this?
EDIT: It was enough to give the properties to the .installmentinfo__container class margin: auto; and transform: translateX(-250px);
2- I have another question. As you can see in the image below, the tooltip that opens does not open exactly under the icon. I don't want a space between the dropdown tooltip and the icon.
Note: The tooltip that opens should appear at the bottom left of the icon.
EDIT: I fixed problem 2.
The picture I'm talking about;
html
<div className="installmentinfo__container">
{
props.installmentList?.map((e, i) => {
return (
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{e.date}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
);
})
}
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
right: 340px;
background-color: white;
&:last-of-type {
border-bottom: none;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
it's hard to understand by looking at these code examples.
My guess is because of "right: 340" value. If the "position: relative" doesn't have a parent element, the current element will always shift 340px from the right.
To prevent this, you may need to give "position: relative" to the parent element where the ".installmentinfo__container" is located. After that, you can use "right: 0".
I'm trying to apply a mask to a div so I can see through it to a background image. Everything I'm seeing is about clip-paths, but I am looking for the opposite of this. Clip-paths show what is in the inside of the clip. I'm trying to have it be a mask, so that you see the outside of the clip.
Here is an example of what I am trying to achieve, and below is a full description of the example.
I have a div with a background image. Inside this div is another div that covers the full width and height of its parent (with the background image), and has a semitransparent (rgba) background color. I'm trying to add a mask to this overlay div (the one with the rgba background color) so that a circle is cut out of the middle that shows the full background image without the color overlay.
Here is a link to a jsfiddle that sets up what I am talking about, but without the mask (since I don't know how to do it).
<div class="backgroundImage">
<div class="backgroundOverlayWithMask">
<!-- content will be here -->
</div>
</div>
.backgroundImage {
width: 100%;
height: 500px;
background: url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg) no-repeat center center;
background-size: cover
}
.backgroundOverlayWithMask {
width: 100%;
height: 500px;
background-color: rgba(0, 0, 0, 0.75);
}
I think I have a solution using box shadow, :after, and flex. Fiddle. Based on web-tiki's answer here.
#inner {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
display: flex;
justify-content: center;
}
#inner:after {
content: '';
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
align-self: center;
}
#container {
background: url('http://via.placeholder.com/800x200');
background-size: cover;
}
<div id="container">
<div id="inner">
</div>
</div>
so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}
Div with overflow: scroll or overflow: auto will solve your problem.
I am modifying bootstrap based HTML editor. I have done image uploading part.In image uploading, I am creating an image inside a div.
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
<img src="uploads/images/dark_knight.jpg">
</div>
I want image to be resizeable hence,
element.style {
border: 1px solid;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
But the issue is when I am hitting a down key cursor is going inside a div containing an image (instead of below a div).
so what changes should I do in order to bring cursor below a div on pressing key down?
Demo: http://jsfiddle.net/u37cxxbh/2/
Make div contenteditable="false" and add textarea element next to image. As in example above.
Simply adding
contenteditable="false"
to the div containing the image seems to solve the problem.
#editor {
overflow: scroll;
max-height: 250px;
height: 250px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
div {
display: block;
}
<div id="editor" contenteditable="true">First line
<div>
//after clicking down arrow key cursor going inside an image div
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
<img src="abcd.jpg">
</div>
</div>
<div>
<br>
</div>
<div>Last line</div>
</div>
Go to google, and without typing anything in, hover your mouse over the "I'm Feeling Lucky" button. See what it does?
I can't think how to do that...on:hover....but the actual content and animation itself, how?
It's not the button that's animating.
They have a hidden div, positioned over the button. It's absolutely positioned.
It contains a lot of spans with all the messages.
On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren't really.
<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
<!-- spans go here -->
</div>
</div>
See the value, -29px? That's all that's changing.
Add a class, ie: focus, for the borders and bold face and the toggle it with jQuery:
$('#button').hover( function () {
$(this).addClass('focus');
}, function () {
$(this).removeClass('focus');
} );
The actual rules you can see Google is using with Chrome are:
.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,.1)
}