On the image above the triangle is outer block, and the main block have 'overflow: hidden'. During the animation part of the animated image is cropped. In the main block necessary boundaries of complex shape. Any ideas how is this possible? Requirement of browsers - top versions chrome or firefox.
example: http://jsfiddle.net/F7Cz9/
This one is a little complex and I don't have all the styling down yet but by using pseudo-elements on a wrapper to create the triangle above...you can do it.
The hover is there just to show the "overflow" working.
Codepen.io Demo
HTML
<div class="super-wrap">
<div class="imgwrapper">
<img src="http://lorempixel.com/output/city-q-c-350-100-8.jpg" alt="" />
</div>
</div>
CSS
.super-wrap {
width:700px;
margin: 50px auto 0;
padding-top: 50px;
border:1px solid grey;
}
.imgwrapper {
width:700px;
position: relative;
}
.imgwrapper img {
display: block;
margin-left: 0;
transition:margin-left 1s ease;
}
.super-wrap:hover img {
display: block;
margin-left: 50%;
}
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I am not asking how to round corners of image. In given case when I mouse-hover on the image you can see that the image is not covering whole div as well as the lower corners are not rounded, but if I add display: block to the image, it covers the div and the lower corners seems to be rounded, I am unable to understand why this is happening?
See images for before and after display:block.
HTML:
<div class="row">
<div class="campus-col">
<img src="./images/london.png" alt="london campus" />
<div class="layer">
<h3>LONDON</h3>
</div>
</div>
CSS:
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.campus-col {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img {
width: 100%;
display: block; /**** THIS PROPERTY ROUNDS THE LOWER CORNER *****/
}
.layer {
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover {
background: rgba(226, 0, 0, 0.7);
}
BEFORE display:block on mouse-hover the image is-
AFTER display:block on mouse-hover the image is -
You can just write the following code instead of display: block;
opacity:1;
This will also work the same as display block. Just try this code and check wether again it is rounding the corners?
This is a slightly fiddly question- essentially, I am making a grid of images where a coloured overlay (div) is displayed upon rollover, with a bit of text within that div. This is very similar to this website- http://twoarmsinc.com/work/category/all. To do this with a div instead instead of an image would be easy- you would nest the overlay inside the other div and set width and height to 100%. However, since you can't nest within an image, and the image is responsively changing size, how should I go about this? I'm not sure background-image will work because I am using a responsive grid system (Simple Grid).
Here's a CodePen: http://codepen.io/anon/pen/iIsGm/
html:
<div>
<div class='overlay'></div>
<img src="http://placekitten.com/300/200" alt="thumb">
</div>
css:
.overlay{
width:100%;
height:100%;
background:#333;
position:relative;
z-index:10;
}
Apologies for the ambiguity- any and all help is greatly appreciated!
You will first need to swap .overlay with the img, so it comes second in the stack.
You have some options for the .container div, but you'll need to set a width to set up a grid. I didn't include it in the fiddle, but you will likely want to set img to max-width: 100%; width: auto; height: auto;, so they can resize and keep their aspect ratios when the browser is resized. For .container, you can also use float: left with a set width. I used display: inline-block here to reduce the amount of code.
DEMO
DEMO with multiple divs floating and simple grid
CSS:
.overlay{
background:rgba(0,0,0,0.5);
position:absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
color: white;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
display: block;
}
.container {
position: relative;
display: inline-block;
}
.container:hover > .overlay {
opacity: 1;
}
HTML:
<div class="container">
<img src="http://placekitten.com/300/200" alt="thumb">
<div class='overlay'>Some text</div>
</div>
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and a tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image)
Here is my implementation of the tutorial: http://mulnix.contestari.com/wp/example225/1.php
JSFiddle: http://jsfiddle.net/dsRAH/
Original Code
Remove the overflow: hidden and all other overflows,
than for your images containers DIV remove float:left; and add display:inline-block;
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
background: #000;
color: #fff;
z-index: 0;
}
.photos {
position: relative;
display: flex;
flex-flow: row wrap;
}
.photo {
box-shadow: 0 0 0 2px #444;
margin: 5px;
position: relative;
max-height: 200px;
transform: translateZ(0);
transition: transform 0.5s;
}
.photo:hover {
z-index: 1;
transform: translateZ(0) scale(1.6);
}
.photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-legend {
position: absolute;
bottom: 0;
width: 100%;
padding: 1em;
background: rgba(0,0,0,0.3);
}
<div class="wrapper">
<div class="photos">
<div class="photo">
<img src="https://placehold.it/200x150/0bf" />
<div class="photo-legend">TEST DESCRIPTION</div>
</div>
<div class="photo">
<img src="https://placehold.it/200x200/f0b" />
</div>
<div class="photo">
<img src="https://placehold.it/200x150/bf0" />
</div>
</div>
</div>
It's not perfect but it's a start. I changed the overflow:hidden; in the wrapper to visible. I also put your code into jsfiddle so people can tinker with it.
http://jsfiddle.net/m8FXH/
You can try to use z-index. An element with greater z-index is always in front of an element with a lower z-index. If you main container is not overflow:hidden than you can try this out.
here is an example where you can see how it works. Hope that is helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I would suggest giving your divs one of the following classes:
colleft for the ones that are at left column
colright for the ones that are at right column
rowtop for the ones at the top row
rowbottom for the ones at the bottom row
And then assign them the following properties
.colleft {
transform-origin-x: 0%;
}
....
transform-origin-x: 100%;
transform-origin-y: 0%;
transform-origin-y: 100%;
(respectively)
That will make the zoom go in the desired direction.
evan stoddard modified fiddle
The last few days i tried to center a button over a fluid image. So far the position is fixed and static. The relevant HTML part looks like the following:
<ul class="moodlegrid sectionwrap">
<li>
<a class="ajax1" href="project1.html">
<img title="Project 1" src="img/projectblur.jpg" alt="Project 1" />
<img title="Project 1" src="img/project.jpg" alt="Project 1" />
<span class="openoverlay">Click</span>
</a>
</li>
</ul>
The CSS looks like that:
.moodlegrid{
li{
a{
position: relative;
display:block;
width: 100%;
img:nth-child(1){
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 37%;
left: 28%;
z-index:101;
#include border-radius(5px, 5px);
#include box-shadow(black 2px 2px 10px);
}
}
}
}
img{
width:100%;
max-width: 100%;
height:auto !important;
}
On mouseover a second image as well as a button should float centered on top of the first image. Problem is if the viewport changes the recent version doesn't work anymore and the button isn't centered. The following article on CSS-tricks had a promising solution:
Centering in the unknown
The demo worked fine:
Centering in the unknown demo
But it utilizes inline-block elements which makes it difficult to layer images and show on top of them a centered button in the end - the elements are displayed after each other when the display:inline-block property is set. There is also the problem that in contrast to my HTML the demo aligns a child object towards a parent.
Is there a way to apply the mentioned technique to my problem, or is there a maybe even better suiting approach? Best regards Ralf
If I understand you rightly, you're almost there I think.
<a> needs to be position: relative;
<span> needs to be position: absolute;
On the <span> if you set a specific width, and apply:
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px /* Half of the height */
margin-left: -50px; /* Half of the width */
http://codepen.io/anon/pen/xjcCf
Does that solve what you're trying to do?
Hi is this what look like
html
<div>
<h1><span>button</span></h1>
<img src="imageSample.jpg" alt="" />
</div>
css
div {
position:relative;
width:100%;
}
div img {
max-width:100%;
width:100%;
}
div h1 {
width:100px;
margin:auto;
}
div h1 span {
position:absolute;
z-index:999;
top:200px;
padding:5px;
background-color:#fff;
}
working demo
note: scroll fiddle so you can see the effect