would you please hlep me about this problem
as you see my codes when i hover article-img its img'transform: scale(1.1) and image overflow and its container are hidden for large size it works but for less than 576px it does not work, i also tested similar codes in media query for less than 576px what's you tip about this?
html:
<div class="img-article ">
<img src="images/xitems1.jpg">
<div class="img-info">
<p class="info-title">Men's Fashion</p>
<a class="info-link" href="#">Shop Now</a>
</div>
</div>
css:
.img-article {
width: 93%;
text-align: center;
position: relative;
cursor:pointer;
display: flex;
justify-content: center;
align-items: flex-end;
overflow:hidden;
}
.img-article::after {
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(4, 14, 39, 0.7) 0%, rgba(241, 242, 245, 0) 50%);
content: '';
z-index: 200;
}
.img-article img {
width: 100%;
height: 100%;
text-align: center;
transition: all 1s ;
overflow:hidden;
}
.img-article:hover img {
transform: scale(1.1);
}
Related
I have a picture which has certain dimensions, and i need to implementa div with a button inside the pic, as it is on this picture.
I tried this, this is my code.
.wrapper {
width: auto;
text-align: center;
}
.wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 70%, #000922 99.52%);
width: 100%;
height: 100%;
z-index: 10;
}
.background-image {
display: none;
}
.responsive-image {
max-width: 100%;
height: 100%;
}
body {
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 1%, #000922 100%);
}
.button-position {
position: absolute;
bottom: 20%;
left: 15%;
z-index: 200;
}
.cta-button {
padding: 2rem 8rem;
background: linear-gradient(180deg, #1FD660 0%, #127C38 100%);
font-family: Barlow;
color: white;
font-size: 40px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.2em;
text-align: center;
}
<div class="wrapper">
<img class="img-fluid responsive-image position-relative" src="https://unsplash.com/random" />
<div class="button-position">
<a class="rounded-0 btn cta-button btn-lg btn-block cta-button" href="<?php echo $button['new_template_button_link'] ?>">
Button
</a>
</div>
</div>
This is what i've gotten so far:
But as you can see, its streched out, and it doesnt look as the figma file above
It looks like you're using a library to adjust the image. Remove the classes img-fluid and position-relative from your HTML.
For the purpose of setting a background image, I would create a seperate div and set the background image to your image.
#hero-div {
background-image: url('./image.jpg');
background-repeat: no-repeat;
background-position: center;
object-fit: cover;
}
Nest the button inside the image and position it there.
I am creating a navbar for a website where I want the behavior of navbar to be like this-
User hovers over a nav-item > nav-item's background image fades in into a sweet radial gradient > color of the whole navbar changes to the farthest color of the nav-item gradient.
Now I want this change in colors of two divs(navbar and nav-item) to appear as a single effect.
HTML Code
<html>
<body>
<div id="navbar">
<div class="navbar container">
<div class="logo">
<img src="./img/Mob-Asset 18.png" alt="">
</div>
<div class="navbar-items">
<div class="navbar-item all-caps text-light" id="services">Services</div>
<div class="navbar-item all-caps text-light" id="clients">Clients</div>
<div class="navbar-item all-caps text-light" id="about-us">About Us</div>
<div class="navbar-item all-caps text-light" id="contact-us">Contact Us</div>
</div>
</div>
</div>
</body>
</html>
CSS Styling
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;700&family=Poppins:wght#100;200;300;500;600;700;800&display=swap');
html{
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(to top, #3d7ad6, #009eea, #12bff3, #5bdef7, #97fbfb);
}
.all-caps{
text-transform: uppercase;
}
.text-light{
color: #ffffff;
}
#navbar .container{
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
max-height: 60px;
box-shadow: 0px 5px 5px 0px #ffffff5a;
background-color: #000000;
transition: background-color 250ms ease-in-out;
}
#navbar .logo{
display: flex;
margin-left: 10px;
align-items: center;
}
#navbar .logo img{
cursor: pointer;
height: 40px;
}
#navbar .navbar-items{
height: 60px;
display: flex;
flex-direction: row;
width: auto;
}
#navbar .navbar-item{
position: relative;
cursor: pointer;
font-size: large;
font-weight: 600;
display: flex;
align-items: center;
margin: 0;
padding: 0 45px;
z-index: 1;
}
#navbar .navbar-item:nth-child(1)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #009aff, #1ba1ff, #2ca8ff, #3caeff, #4ab5ff, #58bbff, #65c0ff, #71c6ff, #7fccff, #8dd1ff, #9ad7ff, #a7dcff);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(1):hover::after{
opacity: 1;
}
/* Services Nav Item Hover End */
/* Clients Nav Item Hover Start */
#navbar .navbar-item:nth-child(2)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #00ff51, #23ff5f, #35fe6c, #43fe78, #4ffd83, #5bfd8c, #67fd94, #71fd9c, #7efea5, #8bfeae, #96ffb7, #a2ffbf);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(2):hover::after{
opacity: 1;
}
/* Clients Nav Item Hover End */
/* Abouts Us Nav Item Hover Start */
#navbar .navbar-item:nth-child(3)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #ffa600, #feab1c, #feb12c, #fdb63a, #fdbb46, #fdbf51, #fcc45c, #fcc867, #fccc74, #fcd180, #fbd58d, #fbd999);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(3):hover::after{
opacity: 1;
}
/* About Us Nav Item Hover End */
/* Abouts Us Nav Item Hover Start */
#navbar .navbar-item:nth-child(4)::after{
position: absolute;
content: "";
height: 100%;
width: 100%;
left:0;
background-image: radial-gradient(circle, #cf3dff, #d145ff, #d34dff, #d454fe, #d65bfe, #d865fe, #db6fff, #dd78ff, #e186ff, #e494ff, #e8a2ff, #ebafff);
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:nth-child(4):hover::after{
opacity: 1;
}
/* About Us Nav Item Hover End */
Jquery
$(document).ready(function(){
$("#services").hover(function(){
$("#navbar .container").css({"background-color": "#a7dcff"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
});
$("#clients").hover(function(){
$("#navbar .container").css({"background-color": "#96ffb7"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
})
$("#about-us").hover(function(){
$("#navbar .container").css({"background-color": "#fbd999"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
})
$("#contact-us").hover(function(){
$("#navbar .container").css({"background-color": "#ebafff"})
},
function(){
$("#navbar .container").css({"background-color": "#000000"})
})
});
Here's the jsfiddle of my current attempt at this. It's a mess but this will give you an idea.
I am doing something like this for the very first time. Any help will be appreciated :)
To do what you require you simply need to set the final colour of the gradient to be transparent. That way it will seamlessly merge in to the background colour set on the navbar.
One thing to note about this is that to make this more effective I removed most of the intermediary steps in the gradients. They were not needed, as the colour stops were the same as going straight from one colour at 0% to another at 100%.
However it's worth noting that there's several other improvements that can be made. Firstly you need to DRY up your code; there's a lot of repetition in the JS and CSS. Put the repeated CSS rules on common selectors, and you can genericise the JS by using a single event handler for all .navbar-item element. You can then create a class for each navbar item which toggles a specific class on the navbar container to set its class.
Here's a working example:
jQuery($ => {
let $container = $('#navbar .container');
$('.navbar-item').hover(e => $container.toggleClass(e.target.id));
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;700&family=Poppins:wght#100;200;300;500;600;700;800&display=swap');
html {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(to top, #3d7ad6, #009eea, #12bff3, #5bdef7, #97fbfb);
}
.all-caps {
text-transform: uppercase;
}
.text-light {
color: #ffffff;
}
#navbar .container {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
max-height: 60px;
box-shadow: 0px 5px 5px 0px #ffffff5a;
background-color: #000000;
transition: background-color 250ms ease-in-out;
}
#navbar .container.services {
background-color: #a7dcff;
}
#navbar .container.clients {
background-color: #96ffb7;
}
#navbar .container.about-us {
background-color: #fbd999;
}
#navbar .container.contact-us {
background-color: #ebafff;
}
#navbar .logo {
display: flex;
margin-left: 10px;
align-items: center;
}
#navbar .logo img {
cursor: pointer;
height: 40px;
}
#navbar .navbar-items {
height: 60px;
display: flex;
flex-direction: row;
width: auto;
}
#navbar .navbar-item {
position: relative;
cursor: pointer;
font-size: large;
font-weight: 600;
display: flex;
align-items: center;
margin: 0;
padding: 0 45px;
z-index: 1;
}
#navbar .navbar-item::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: -1;
}
#navbar .navbar-item:hover::after {
opacity: 1;
}
#navbar .navbar-item:nth-child(1)::after {
background-image: radial-gradient(circle, #009aff 0%, rgba(167, 220, 255, 0) 100%);
}
#navbar .navbar-item:nth-child(2)::after {
background-image: radial-gradient(circle, #00ff51 0%, rgba(162, 255, 191, 0) 100%);
}
#navbar .navbar-item:nth-child(3)::after {
background-image: radial-gradient(circle, #ffa600 0%, rgba(251, 217, 153, 0) 100%);
}
#navbar .navbar-item:nth-child(4)::after {
background-image: radial-gradient(circle, #cf3dff 0%, rgba(235, 175, 255, 0) 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="navbar">
<div class="navbar container">
<div class="logo">
<img src="./img/Mob-Asset 18.png" alt="">
</div>
<div class="navbar-items">
<div class="navbar-item all-caps text-light" id="services">Services</div>
<div class="navbar-item all-caps text-light" id="clients">Clients</div>
<div class="navbar-item all-caps text-light" id="about-us">About Us</div>
<div class="navbar-item all-caps text-light" id="contact-us">Contact Us</div>
</div>
</div>
</div>
I have problem with positioning:
I cannot set exactly top: 50% and left: 50% on both photo and text because it isn't 50%. I try by hand set that 50% which is more like 46%.
When I change size of window text moves. I don't know what to Do and I am looking for answer for 2 hours
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
text-align: center;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
margin-left: auto;
margin-right: auto;
color: #f0eeee;
font-family: sans-serif;
position: relative;
}
.tytul {
display: flex;
text-align: center;
position: absolute;
top: 46%;
left: 45.3%;
}
.zdj-pierw img {
border-radius: 100px;
align-items: center;
justify-content: center;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
You should be using flex properties on the parent, not just on the item you want to place.
I've also changed your border-radius to 50%, as this is a perfect round, no matter what the size of the image.
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
color: #f0eeee;
font-family: sans-serif;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.tytul {
position: absolute;
}
.zdj-pierw img {
border-radius: 50%;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I am trying to make some line appear(say about 10px) after hovering mouse on an image at the bottom of the image
I saw this on MTV's website in their "You would also like these" section below every post.They use css-background sprites to do that.
I am going mad after repeated failed attempts to recreate.Everythings works,except the main onhover line coming up.
This is my code so far
CSS
.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;}
.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;}
HTML
<div class="movieL hover_thumb">
<div><img width="165" height="93" alt="" src=""/>
<div class="yel_strip"></div>
</div> </div>
Any help would be appreciated.Thanks
I've made working fiddle for you with no extra not needed markup in your html: http://jsfiddle.net/PJMPw/3/
Your HTML:
<a href="#" class="hoverable">
<img src="http://placekitten.com/g/300/300" />
</a>
And CSS:
.hoverable {
display: block;
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.hoverable:hover:after {
bottom: 0;
}
.hoverable:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
bottom: -10px;
left: 0;
background: -moz-linear-gradient(left, rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1)));
background: -webkit-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -o-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -ms-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: linear-gradient(to right, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
This is the HTML:
Replace http://yoururl with your url.
<div class="container">
<span></span>
</div>
This is the CSS:
Replace http//yourimage with your image address.
.container {
width: 165px;
height: 93px;
background: url('http//yourimage');
position: relative;
}
#internal_image {
display: blocK;
width: 165px;
height: 93px;
}
#internal_image:hover span {
display: block;
width: 165px;
height: 5px;
position: absolute;
background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat;
background-position: -280px -495px;
bottom: 0;
}
EDIT: Added EXAMPLE: http://jsfiddle.net/BmwCe/3/
The simples thing you could do is set a border on the image on hover.
i.e
markup
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
</div>
css
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container img:hover {
border-bottom: 5px solid green;
}
If you insist that you want to have a background image instead of border you could do this
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
<div class="shiny-border"></div>
</div>
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container .shiny-border {
position: absolute;
top: 90px; //subtract the height of the shiny-border from 100px which is the height // to have the inset effect of the image
height: 10px;
width: 100%;
display: none;
}
.image-container img:hover + .shiny-border {
display: block;
background-image: url(../styles/images/Hydrangeas.jpg);
}