I am creating a rollover on an image div where once you roll over, the image opacity goes down and text over the top appears. This works fine for just one image, but when trying it on more then one image the opacity doesn't work correctly and the text doesn't seem to appear on the other images.
HTML:
<div class="worklongdiv" style="padding-top:111px";>
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
<div class="worklongdiv" >
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
CSS:
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto
position: relative;
background-color: black;
}
.worklongdiv:hover img {
opacity: 0.3;
}
.worklongdiv:hover .work-text-content-long {
opacity: 1;
}
.worklongdiv img {
padding: 0;
width: 100%;
display: block;
opacity: 1;
}
.worklongdiv img,
.work-text-content-long {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.work-text-content-long {
height:100px;
position: absolute;
color: white;
left: 0;
top: 25%;
right: 0%;
left:101px;
bottom: 0;
font-size: 24px;
text-align: left;
opacity: 0;
}
You're missing a ; in one of your CSS rules.
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto;
position: relative;
background-color: black;
}
Related
Currently, I'm working on simple card recipe on VueJS and have a little problem. While mouse is on image, I would like to show diffrent properties of my recipe(like in this picture https://pasteboard.co/JrWe5JB.png). Firstly I darken a little bit my image and trying to display symbol on this(while mouse is on ofc), but it doesn't seem work. Here is my code:
CSS
.imageRecipeContainer
{
position: relative;
height: 200px;
min-width: 100%;
}
.imagePerfumeRate
{
position: absolute;
display:none;
left: -9999px;
right: -9999px;
margin: auto;
height: 200px;
min-width: 100px;
}
.card-image {
position: absolute;
display:block;
left: -9999px;
right: -9999px;
margin: auto;
height: 200px;
min-width: 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;
}
.card-image:hover
{
-webkit-filter: brightness(30%);
filter: brightness(30%);
}
.card-image:hover .imagePerfumeRate
{
display: block;
}
and code in Vue:
<div class="imageRecipeContainer">
<img class="card-image" :src="card.image"/>
<img class="imagePerfumeRate" :src="require('../assets/2PointPerfumeRate.svg')"/>
</div>
I'm simply trying to add a button on hover but I'm stuck...
Is it possible to achive this only with CSS?? I'm using bootstrap if it helps
.card-img-top {
-webkit-filter: brightness(100%);
}
.card-img-top:hover {
-webkit-filter: brightness(40%);
-webkit-transition: all .15s ease-in-out
-moz-transition: all .15s ease-in-out
-o-transition: all .15s ease-in-out
-ms-transition: all .15s ease-in-out
transition: all .15s ease-in-out
}
<img class="card-img-top" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
Yes, this is possible with CSS only. You could do it with a separate element with all the content in it (.overlay). This element is shown when there is a hover over the image-wrapper. I've used opacity and visibility together, so that a transition is possible (visibility, because opacity: 0 is still clickable).
Darkening the image can be done with a background color which is semi-transparent (rgba()). I've then positioned the wrapper of the two button elements inside the image with position absolute 50% and then moved it back half the height and width to make it appear exactly in the middle of the image. This can of course also be done with flexbox.
The two yellow buttons inside the button-wrapper are positioned next to each other with display: inline-block. If you do it like this, a line break is often added but can be removed by using white-space: nowrap.
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .overlay {
opacity: 1;
visibility: visible;
}
.overlay {
opacity: 0;
visibility: hidden;
transition: 0.3s ease all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
.overlay .button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.overlay .button {
width: 50px;
height: 50px;
display: inline-block;
background: yellow;
margin: 20px;
border-radius: 100px;
}
.image {
max-width: 350px;
max-height: 350px;
}
<div class="wrapper">
<img class="image" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
<div class="overlay">
<div class="button-wrapper">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
</div>
I have an absolutely positioned image inside a relatively positioned container.
Height of image is bigger than that of the container.
I want the image to scroll up to its end using only CSS.
The catch is that height of the image could vary, so it makes sense to make sure that bottom of the image is aligned with bottom of the container once hovered.
Following is the code:
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
bottom: 0;
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
Try transition on transform
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease;
}
img:hover {
transform: translateY(-60%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
EDIT:
As the height is not set, I'd suggest a jQuery/js solution
$("img")
.mouseover(function() {
var offset = -$(this).height() + 200;
$(this).css("top", offset);
})
.mouseleave(function() {
$(this).css("top", 0);
});
body {
display: flex;
justify-content: space-around;
}
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: top 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>
You need a way to position the element equivalent to bottom: 0px, but taken for the reference the top .
If you set top: 100%, the top of the element will be at the bottom of the parent.
Then, set a transform of 100%, and the bottom will be where the top was.
Notice that this solution works for any image and container height.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0%;
transform: translateY(0%);
transition: all 1s ease;
}
img:hover {
top: 100%;
transform: translateY(-100%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
You can have a transition between bottom: 0 and bottom: calc(100% - 18px), which is the height of the container minus the height of box2.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
}
.box2 {
position: absolute;
height: 18px;
bottom: calc(100% - 18px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.box:hover .box2 {
background-color: green;
bottom: 0;
}
<div class="box">
<div class="box2">
test
</div>
</div>
You can use this, try this with working snippet,
.box{
position:relative;
display:block;
height:200px;
width:200px;
background-color:red;
transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}
.box:hover .box2{
background-color:green;
margin-top: 180px;
}
<div class="box">
<div class="box2">
test
</div>
</div>
Alright, so, I'm still fairly new to CSS and HTML and have run into another problem. I couldn't seem to find my question already answered on here, but I hope to be redirected if someone finds out it has been asked and answered. Anyway, I'm using flex-box and attempting to horizontally align these three boxes within a wrapping div element. The three boxes themselves are relatively positioned, with a single absolutely positioned rectangle within each. So a div, surrounding three div boxes, surrounding a single rectangular div each.
image example
I've managed to horizontally align them, but I've found an issue. The rectangular divs inside the three boxes are set up to "pull" out from the side of the boxes and form a band across with a tooltip over the front. I haven't even started work on the third box yet, because only the first box works how it's supposed to. The second box, for some reason, isn't functioning, and the absolute positioning of its band seems to be latching onto the header. So instead of pulling out from the side of its box, it is pulling out from the top side of the screen.
image example
When I delete the first box, the second box works fabulously. But both of them together, the first works, and the second blunders. Wrapping the faulty box in a second div prevents the problem. Also, borders don't show when I try to see where the apparently non-functioning div is, and letters typed within the div's HTML appear outside the image of the box. There is also a tiny dot below the element, or sometimes appearing beside it, that triggers the tooltip when hovered over.
What could possibly be the error? Are the two boxes somehow interacting and slipping each other up? Have I missed something? Help, please!
#bodyWrap {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/* (1st) thumbnail begin */
.icon01 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon01 img {
border: 1px solid #000000;
}
.expThumb {
position: relative;
top: 0;
opacity: 0;
visibility: hidden;
z-index: 3;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.tooltip {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon01:hover .tooltip {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon01:hover .band {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon01:click .expThumb
/* (1st) thumbnail end */
/* (2nd) thumbnail begin */
.icon02 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon02 img {
border: 1px solid #000000;
}
/* insert expanded image here
. {
position:absolute;
top:0;
opacity:0;
visibility:hidden;
z-index:6;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
*/
.tooltip2 {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 5;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band2 {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 4;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon02:hover .tooltip2 {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon02:hover .band2 {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon02:click .expThumb2
/* (2nd) thumbnail end */
<div id="bodyWrap">
<div class="icon01">
<a href="#info">
<img src="img/thumb.jpg" alt="box">
<img class="expThumb" src="img/thumb2.png">
<h2 class="tooltip">aTip</h2>
<div class="band"></div>
</a>
</div>
<div class="icon02">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip2">aTip</h2>
<div class="band2"></div>
</a>
</div>
<div class="icon03">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip3">aTip</h2>
<div class="band3"></div>
</a>
</div>
<div id="info" class="active">
<p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
</div>
</div>
only .icon01 is position: relative;. The other parents, .icon02, .icon03 are statically positioned.
You can make those divs relative with the child combinator selector, or you could give them all a common class and target them that way, or you could just do .icon01, .icon02, .icon03 { position: relative; }. I'm using the child combinator selector here.
#bodyWrap > div {
position: relative;
}
#bodyWrap {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/* (1st) thumbnail begin */
.icon01 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon01 img {
border: 1px solid #000000;
}
.expThumb {
position: relative;
top: 0;
opacity: 0;
visibility: hidden;
z-index: 3;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.tooltip {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon01:hover .tooltip {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon01:hover .band {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon01:click .expThumb
/* (1st) thumbnail end */
/* (2nd) thumbnail begin */
.icon02 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon02 img {
border: 1px solid #000000;
}
/* insert expanded image here
. {
position:absolute;
top:0;
opacity:0;
visibility:hidden;
z-index:6;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
*/
.tooltip2 {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 5;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band2 {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 4;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon02:hover .tooltip2 {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon02:hover .band2 {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon02:click .expThumb2
/* (2nd) thumbnail end */
<div id="bodyWrap">
<div class="icon01">
<a href="#info">
<img src="img/thumb.jpg" alt="box">
<img class="expThumb" src="img/thumb2.png">
<h2 class="tooltip">aTip</h2>
<div class="band"></div>
</a>
</div>
<div class="icon02">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip2">aTip</h2>
<div class="band2"></div>
</a>
</div>
<div class="icon03">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip3">aTip</h2>
<div class="band3"></div>
</a>
</div>
<div id="info" class="active">
<p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
</div>
</div>
You can see what i have tried to do. But I want the bottom of each image rollover to appear after the right pops up and fades in. Not just when the mouse is hovered over the bottom of each image.
I'm also having trouble making the whole thing clickable to a blog post without overshadowing/stopping the individual links, and short code selection from being workable.
I've been at this for days with no luck... (The social icons, will be individual links but I've not done that yet)
Anyone see where I'm going wrong? I've got a fiddle at bottom. Ideally I'd like for it to all play on hover but obviously delay the black box at the bottom. I'm so close its annoyingly annoying.
HTML:
<body>
<div class="wrapper">
<div class="container left">
<img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suit6.jpg" alt="image" />
<div class="sig"></div>
<div class="innercontent css3-2">
<span class="css3-2 resize"><br/><h2>Title of the blog Post</h2>
<p>April 29, 2014</p>
<p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p>3/4 length • Agnelli check • bespoke jacket • Jacket • London Lounge</p><span class="clickhere">Click here to read this article</span></span>
</div>
</div><!-- .container -->
<div class="container right">
<img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suittemp.jpg" alt="image" />
<div class="sig"></div>
<div class="innercontent css3-2">
<span class="css3-2 resize"><br/><h2>Title of the blog Post</h2>
<p>April 29, 2014</p>
<p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p>3/4 length • Agnelli check • bespoke jacket • Jacket • London Lounge</p><span class="clickhere">Click here to read this article</<span></span>
</div>
</div><!-- .container -->
</footer>
</div><!-- .wrapper -->
</body>
CSS:
*{margin:0;padding:0;}
img {margin:0;padding:0px;}
.wrapper{
margin:0 auto;
width:720px;
padding:30px;
position:relative;
}
.left {float:left;}
.right {float:right;}
p {
color:#000;
font-size:14px;
margin-bottom: 12px;
}
a{
text-decoration:none;
color: #000
}
h2, h2 a { font-size: 20px;
color: #000;
line-height: 30px;
}
h2 a:hover, a:hover {
color:#F3625F;
}
.container{
position:relative;
overflow:hidden;
width: 300px;
max-height: 100%;
}
.sig {
display: block;
width: 98%;
height: 98%;
background: url(http://www.glennleader.co.uk/wp-content/uploads/2014/05/signature.png) bottom right no-repeat ;
top: 0;
left: 0;
position:absolute;
overflow: hidden;
}
.resize {
width: 95%;
height: 100%;
position: absolute;
display: block;
overflow: hidden;
padding: 0 2.5%;
top: 0;
left: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
transition: all .2s ease-out;
opacity: 0;
}
.resize:hover {
opacity: 1;
}
.clickhere {
position: absolute;
display: block;
overflow: hidden;
width: 300px;
height: 20px;
padding: 15px 0;
text-align: center;
bottom: 0;
left: 0;
background: #000;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;
animation-delay:2s;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
}
.clickhere:hover a {
display: block;
color: #fff;
font-weight: 800;
}
.clickhere:hover {
opacity: 0.5;
cursor: pointer;
}
.clickhere a:hover {
color:#F3625F
}
.url textarea {
width: 100%;
border: 0 none transparent;
margin: 0;
padding: 0;
outline: 0;
resize: none;
overflow: hidden;
font-family: inherit;
background: 0;
text-align: center;
font-size: 12px;
height: 16px;
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
-webkit-writing-mode: horizontal-tb;
background: transparent;
}
.innercontent {
display: block;
height: 100%;
text-align: center;
width:100%;
background:rgba(255,255,255,0.7);
position:absolute;
}
.css3-2:hover .resize {
}
.css3-2 {
bottom:-370px;left:0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.innercontent a.css3-2{
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container:hover .css3-2 {
bottom:4px;
cursor: pointer;
}
Fiddle:
http://jsfiddle.net/Veriix/euXGZ/
The first issue is solved easy... you need to add the ::hover-pseudo class to the parent element to change the styles properly.
.css3-2:hover .clickhere a, .clickhere:hover a {
display: block;
color: #fff;
font-weight: 800;
}
.css3-2:hover .clickhere, .clickhere:hover {
opacity: 0.5;
cursor: pointer;
}
.css3-2 .clickhere a:hover, .clickhere a:hover {
color:#F3625F
}
Updated Fiddle:
http://jsfiddle.net/euXGZ/5/
(I did not make any animation changes, just an update on the issue of displaying the link onhover)
EDIT: If you don't want the clickable element to slide in, give it an absolute positioning and maybe add some different animation (including a delay if you want it to wait til the slide in is done!)
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
https://www.facebook.com/j.beargraphics