I have an image I want to display as a link. I have a hover effect when the mouse is over the image, but I also want to overlay a text label onto the image. The problem is, when the mouse is over the text, the image effect stops working.
My code is below. Can anyone suggest how I can fix this?
<html>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pic {
border: 5px solid #FF0000;
float: left;
width: 475px;
height: 375px;
margin: 20px;
overflow: hidden;
position: relative;
-webkit-box-shadow: 5px 5px 5px #C0C0C0;
box-shadow: 5px 5px 5px #C0C0C0;
}
.grow img {
width: 475px;
height: 375px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 570px;
height: 450px;
}
.label {
top: 150px;
position:absolute;
text-align:center;
font-size:500%;
color: FF0000;
width: 100%;
}
</style>
<a href="MyLink.html">
<div class="grow pic">
<img src="MyImage.jpg" alt="TITLE">
<div class="label">TITLE</div>
</div>
</a>
You could try disabling pointer-events:
.label { pointer-events:none; }
Your hover is just on your image, apply the hover to the div.
example:
.grow:hover img {
//styles
}
Related
Per the title, you can see a demo of the issue here.
Here is the HTML code:
<div id="outer">
<div id="inner">
</div>
</div>
Here is the CSS code:
#inner{
height: 100%;
width: 100%;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover{
opacity: 1;
}
#outer{
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
I've tried various suggestions here and here with no solution.
you are using margin-top:20px;
in this element
#inner {
height: 100px;
background-color: #42749F;
width: 200px;
/* -1px here for to compansate for the outer border of the container */
-moz-border-radius: 0 0 9px 9px;
}
remove margin and it will fill inside parent element
Working fiddle
The problem in that is that the child takes priority, if the parent div says:
text-font: Sans-Serif
but the child says:
text-font: Arial
the elements in the child sector take priority. In other words, the parent is the "Default". The same happens to "rounded corners" and "margin-top". The "margin-top" takes priority.
Just make sure that those two are correct.
I guess the border you've set on the inside division is creating problems here. Removing the border makes the child element fully fill the parent.
Is this what you were looking for? You may elaborate more if you want, in comments.
.box {
position: relative;
overflow: hidden;
border-radius: 20px;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
.scratcher{
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
transition: opacity .5s linear;
}
.scratcher:hover{
opacity: 1;
}
<div class="box">
<div class="scratcher">Scratcher</div>
</div>
I noticed that if you offset the difference (6px) in border-width of the containing element (.box_1 / #outer), with the border-radius of the nested element (#scratcher / #inner), you will fill up the corner gaps.
Deduct 6px from the border-radius value of the nested element (#scratcher / #inner).
#inner {
height: 100%;
width: 100%;
border-radius: 13px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover {
opacity: 1;
}
#outer {
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
<div id="outer">
<div id="inner">
</div>
</div>
i try to use zoom image(scale CSS3) animation when mouse hover the image, but i have a problem with overflow during the animation, i want use tag <img> because i want put background color besides the image(have background transparency)
this is my problem:
HTML:
<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>
CSS:
.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
}
.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
https://jsfiddle.net/j1rdv968/
anyone know a solution?
ps. sorry my english.
You can keep the transforming image inside of the .divIMG div by giving it a position: relative;, and a higher z-index than its child image.
CSS
.thumbnail div.divIMG {
z-index: 3;
position: relative;
}
.thumbnail img {
z-index: 2;
}
.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
z-index: 3;
position: relative;
}
.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
z-index: 2;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>
JSFiddle
I want to be able to make text appear over image upon hover without the current effects effecting the text boxes can anyone please assist me with this?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #4d4d4d4d;
}
.pic {
border: 0px solid #55009f;
height: 200px;
width: 200px;
margin: 20px;
overflow: hidden;
}
/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
-webkit-transform:translate(0px,-10px);
-webkit-filter:grayscale(100%) blur(1px);
}
<link rel="Stylesheet" href="Stylesheet.css">
<div class="morph pic">
<img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>
This is known as imagetooltip
Visit
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm
Everything including the demonstration, code and files are there.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #4d4d4d4d;
}
.morph{
height: 200px;
width: 200px;
text-align:center;
margin:0
}
.pic {
border: 0px solid #55009f;
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
}
/*MORPH*/
.pic{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover > .pic{
-webkit-transform:translate(0px,-10px);
-webkit-filter:grayscale(100%) blur(1px);
}
.tooltip{
background:rgba(80,80,80,0.5);
color:black;
z-index:10;
display:none;
position:absolute;
top:100px;
height:200px;
width:200px;
margin-top:-100px;
}
.morph:hover > .tooltip{
display:block;
}
<link rel="Stylesheet" href="Stylesheet.css">
<div class="morph">
<div class="pic">
<img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>
<div class="tooltip">Lorem ipsum sit dolor am ecit, lorem ipsum sit dolor am ecit, I'm sure I got these wrong, but who cares </div>
</div>
You could do it like this :)
I dont see any text that you want to show over there when hovering. But :hover is that to achieve this. So the answer is simply to provide tag element for the text you want to show and hide that, and then on hoverin, show the element. For example:
<div class="imtex">
<img src="some.jpg"/>
<p>hi my text is here</p>
</div>
So the style is:
.imtex {
display: block;
position: relative; //in case you want the child to absolute
}
.imtex img {
display: block;
position:absolute;
z-index: 2;
top: 0;
bottom:0;
left:0;
right: 0;
}
.imtex p {
display: none;
position:absolute;
z-index: 3; //after the image index
top: 0;
bottom:0;
left:0;
right: 0;
}
.imtex:hover p {
display: block;
}
Here is my code:
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
background-size: cover;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
width: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">
<p>Pool</p>
</span>
</div>
</div>
What I want to do is to set background image inside parent div to stretch.
I have tried in #mainwrapper .box img like
position:absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
But it doesn't work .
Fiddle Example
a few things:
you can't have p tag inside span
use max-width:100% in your img (or width:100% if the image is smaller than the container)
use max-width over width in your #mainwrapper to avoid scrollbars, with that the container will be "resizable", so easier to work for responsive
remove background:cover, because you don't have a background at all
UPDATE
added object-fit per OP request in comment.
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0;
text-align: center;
max-width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
object-fit: cover;
height: 100%;
width: 100%
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 100%;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">Pool</span>
</div>
<hr />
<div id="box-2" class="box">
<img id="image-2" src="//lorempixel.com/100/400" />
<span class="caption simple-caption">Pool</span>
</div>
</div>
Just set the image's width to 100%
#mainwrapper .box img {
width: 100%;
}
Fiddle
or add the background-image in css for the div.
.box {
background-image: url("http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg");
background-size:cover;
}
remove the <img> tag in your HTML if you choose this route.
I'm trying to create a zoom effect by using CSS transition to grow an image inside a fixed size container on hover. The container frame has a border and padding, and I would like them to stay when the image grows. The problem is that when it grows, the padding on the right and bottom disappear.
Here is the CSS code:
.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}
.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}
And here the HTML code:
<div class="videoframe"> <img src="image.jpg" /> </div>
Is there any way to maintain the 10px padding all the way around the image when it changes size?
I've transfered the transition to the frame (when the frame gets hovered, the transition kicks in).
Working Fiddle
HTML: (another div added)
<div class="videoframe">
<div>
<img src="http://www.ac4bf-thewatch.com/initiates/upload/20130909/big_522e1c989c94f.jpg">
<div>
</div>
CSS
.videoframe
{
width: 200px;
height: 113px;
border: 2px solid black;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
}
.videoframe div
{
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoframe img
{
width: 100%;
height: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe:hover img
{
width: 300px;
height: 168px;
}
sorry I'm a little bit confused, do you want the parent container to expand with the image?
if so please see http://jsfiddle.net/NcaAA/
you can use
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
with
padding:10px;
to keep consistent padding that takes into account the total width and height you want.