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>
Related
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>
I am trying to build menu bar for my first website. On the window resolution of 1280x800 menu is seen properly. However, when scaling it down, Menu starts aligning incorrectly.
HTML:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/>
<div class="menu">
Buy Cherry
</div>
CSS:
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: fixed;
top: 0%;
left: 0%;
right: 0%;
background-image: url('http://i.imgur.com/kMdEoP6.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('http://i.imgur.com/7d2V63b.png');
width: 249px;
height: 55px;
}
.shopbtn {
position: fixed;
font-size: 12pt;
right: 10%;
left: 23%;
top: 5%;
white-space: nowrap;
color: black;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
float: right;
}
.shopbtn:hover {
color: darkred;
I have tried adding margin-left and margin-right with auto statement on all the elements, but the menu would mess up and still would go incorrectly when resized.
What is solution for keeping navigator proper when scaled? Is there any layout that could solve the problem? Can this be done without use of Javascript?
Just remove position fixed from both logo and shopbtn and add float left as below,
.logo {
float:left;
}
.shopbtn {
background:#666666;
float:left;
margin:20px;
}
Now adjust your padding and margin accordingly.
You can add min-width to the <body> tag and set your desired width size. It can help maintain your page size whenever you try to scale it down.
body {
background-color: lightgrey;
min-width: 800px;
}
Edit: Try changing your .logo's position to relative.
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: relative;
top: 0%;
left: 0%;
right: 0%;
background-image: url('images/logo.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('images/logohover.png');
width: 249px;
height: 55px;
}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}" />
<div class="menu">
Logo
Buy Cherry
</div>
Update: Change the .logo's position to relative. Maybe this is the one that you are looking for.
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;
}
I'm looking for css magic here. I want the user to hover over the box which already has the text on it. Then I need the black box to rise up from below and sit behind the text.
MY JS FIDDLE HERE!
I've got this:
<div class="box expanded">
Some text
</div>
My CSS:
.expanded {
height: 179px;
font-size: 20px;
padding-top: 130px;
position: relative;
z-index: 1000;
background-color: red;
transition: transform 0.4s;
}
.expanded:after {
content: '';
position: absolute;
height: 80px;
width: 100%;
bottom: 0;
left: 0;
z-index: -999;
background-color: #000;
transform: translateY(0%);
transition: transform 0.4s, opacity 0.1s 0.3s;
}
Add overflow:hidden to the parent, .box, and set the initial position of the pseudo element to top:100%. On :hover of the pseudo element, transition it to top:0 and add some transition properties to make it smooth.
UPDATED EXAMPLE HERE
.box {
overflow:hidden;
}
.expanded:after {
content:'';
position: absolute;
height: 80px;
width: 100%;
top:100%;
left:0;
z-index: -999;
background-color: #000;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
.expanded:hover:after {
top:0;
}
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
Put this in .expanded class
I am using following code to display a hidden div on hover. I'm using the CSS transition property for to fade in the hidden div. Is it possible to slide in the hidden (for example from left to right) div instead of fading in using the CSS only?
Here's my code:
HTML
<div class="box">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg">
<div class="hidden"></div>
</div>
CSS
.box{
position: relative;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: 0;
width: 500px;
opacity: 0;
transition: all 1s ease;
}
.box:hover .hidden{
opacity: 1;
}
Demo:
http://jsfiddle.net/u2FKM/
Something like this?
DEMO
And the code I used:
.box{
position: relative;
overflow: hidden;
}
.box:hover .hidden{
left: 0px;
}
.box .hidden {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
I may also add that it's possible to move an elment using transform: translate(); , which in this case could work something like this - DEMO nr2
Just to add my answer, it seems that the transitions need to be based on initial values and final values within the css properties to be able to manage the animation.
Those reworked css classes should provide the expected result :
.box{
position: relative;
top:0px;
left:0px;
width:0px;
}
.box:hover .hidden{
opacity: 1;
width: 500px;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
opacity: 0;
transition: all 1s ease;
}
<div class="box">
<a href="#">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
<div class="hidden"></div>
</div>
http://jsfiddle.net/u2FKM/2199/
I added the vendor prefixes, and changed the animation to all, so you have both opacity and width that are animated.
Is this what you're looking for ? http://jsfiddle.net/u2FKM/3/
transition-property:width;
This should work. you have to have browser dependent code
This may be the good solution for you: change the code like this very little change
.box{
position: relative;
}
.box:hover .hidden{
opacity: 1;
width:500px;
}
.box .hidden{
background: yellow;
height: 334px;
position: absolute;
top: 0;
left: 0;
width: 0;
opacity: 0;
transition: all 1s ease;
}
See demo here