I'm trying to transform on hover, the background image that is in a grid. I don't know how to organise my classes so that I can scale the image and not the grid block.
I have this code:
.useful-link1 {
background-color: rgb(255, 255, 255);
grid-column: 2/4;
width: 100%;
height: 100%;
background-image: url(images/nasa.png);
background-position: center;
background-attachment: scroll;
background-size: 40%;
background-repeat: no-repeat;
}
.useful-link1:hover {
transform: scale(1.05);
transition: 0.3s;
}
How would I go about taking the background image out? I know it's an elementary question, not so easy to search for apparently, though.
Related
I was looking for how to generate the new glass morphism effect with CSS3. Afortunatelly I found This article that make it happens. In the first method the article makes something like this (I wrote this code with the same structure and properties):
body {
min-height: 100vh;
background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
background-attachment: fixed; /*<------ This is the most important part*/
}
.contenedor {
width: 500px;
border-radius: 10px;
height: 400px;
border: 1px solid #eee;
position: relative;
overflow: hidden;
background: inherit; /*<------- Here the ".contenedor" element inherits its parent's background*/
z-index: 2;
}
.contenedor::before {
z-index: -1;
content: "";
background: inherit;
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 2000px rgba(255, 255, 255, 0.5); /*<------- Here the magic happens making a blur inside */
filter: blur(10px);
}
With this HTML:
<body>
<div class="contenedor">
TEXT INSIDE
</div>
</body>
Now, I don't understand how the background-attachment works to mantain the background in the .contenedor element with inherit background.
I know that the background:inherit is to inherit all background properties from its parent, but what happen if I put
{
...
background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
background-size: cover;
background-attachment: fixed; /*<------ This is the most important part*/
...
}
instead inherit, It doesn't work.
PDT: Of course I understand the ::before pseudoclass to achieve the background and I'm using the first methos instead the second because is not compatible with Mozilla Firefox
Thank you all and sorry about my poor English
Don't know how to properly word this, but tried to implement this codepen:
https://codepen.io/danielkvist/pen/LYNVyPL
The div background is a continuation of the actual body background.
When taking it apart and implementing my own, the div doesn't continue, instead becoming it's own background.
Implementation here, what's missing to mimic the codepen?
Main point of interest appears to be:
.overlay {
background-color: var(--lightblue);
background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: -100%;
position: relative;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
width: 200%;
}
I'm currently trying to figure out a way to make it so that upon hovering over each separate box on the front page of my website (http://thefloodplains.com/), a shadow animation occurs for that specific box. I want it to look very similar to what can be found at this page: http://tobiasahlin.com/blog/how-to-animate-box-shadow/. I've used this page as a guide in an attempt to set up a hover shadow effect.
Here's the CSS/HTML specifically for the div boxes on my web page (http://thefloodplains.com/):
.col-md-4 {
color:#00A5D1;
height:300px;
}
.col-md-3 {
color:#00A5D1;
height:300px;
box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
background-color: #FFE097;
}
.col-md-3:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
position: relative;
}
.col-md-3 {
height:300px;
position: relative;
}
.col-md-4:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.col-md-3:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-3:hover:after {
opacity: 1;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
Anything with the class ".col-md-3" is where I have attempted to add in the hover-shadow effects (in much the same way that I already have the current hover-color effects set up). The following code is the rest of the CSS/HTML of my front page:
<style>
h3 {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
img {
max-width: 100%;
max-height: 100%;
}
#div1 {
background-image: url('AboutIcon.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div2 {
background-image: url('ArticlesIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div3 {
background-image: url('CodingBrackets2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div4 {
background-image: url('ContactIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div5 {
background-image: url('FSMusicArt.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div6 {
background-image: url('AudioProduction4.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div7 {
background-image: url('Violin3.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div8 {
background-image: url('GalleryImage2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div9 {
background-image: url('Handshake2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
div {
background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<a href="About.html" title="About the site and Author"><div class="col-md-4" id='div1'>
<h3>About</h3>
</div></a>
<a href="Articles.html" title="Original Articles and Content"><div class="col-md-4" id='div2'>
<h3>Articles</h3>
</div>
<a href="CodingCorner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4" id="div3">
<h3>Coding Corner</h3>
</div></a>
</div>
<div class="row">
<a href="Contact-Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4" id="div4">
<h3>Contact & Social</h3>
</div></a>
<a href="TheFloodSharkMain.html" title="The FloodShark Music and Media"><div class="col-md-4" id="div5">
<h3>
The FloodShark
Music
</h3>
</div></a>
<a href="FloodplainProductions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4" id="div6">
<h3>Floodplain Productions</h3>
</div></a>
</div>
<div class="row">
<a href="ClassicalCorner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4" id="div7">
<h3>Classical Corner</h3>
</div></a>
<a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4" id="div8">
<h3>Gallery</h3>
</div></a>
<a href="Contribute-Support.html" title="Contribute to The Floodplains!"><div class="col-md-4" id="div9">
<h3>Contribute / Support</h3>
</div></a>
</div>
</div>
</body>
I tried adding "col-md-3" to the div's as a second class in the above code along with "col-md-4," which controls the color hover effect. The problem is, I don't think this method works, but I'm not really sure what does. As of right now, I'm using the "col-md-4" color hover effect - which is working - but getting a shadow effect to work simultaneously is something I have yet to figure out.
So currently - upon hovering - the boxes turn to that transparent shade of orange/yellow. Is there a way that I can get the shadow animation AND the color-change hovers to work together at the same time? So basically I just need a hover animation added to what is already here at http://thefloodplains.com/.
Thank you in advance for your time.
Create a new class for the effect i.e. hovernow add the following code:
body {
background-color: white;
}
.hovernow {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.hovernow:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}
<div class="hovernow">
</div>
Then add this class .hovernow to the div's which you like the hover effect to apply to.
Are you looking for this, Fiddle
I have added the style for .col-md-4. Please check the code...
I have a square with a rounded corner. I need to animate the rounded corner closing in on an image. The image must not move, so the animation would appear as if the circle is "swallowing" the image.
Html:
<div class="container">
<div class="circle"></div>
</div>
Css:
.container {
height: 200px;
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.circle {
width: 200%;
height: 200%;
background-image: url(http://www.planwallpaper.com/static/cache/8a/e0/8ae0d4f7338822ba567adfc22c54f1b6.jpg);
background-size: 50% 50%;
background-repeat: no-repeat;
border-radius: 50%;
transition: 1s all ease-in-out;
position: relative;
}
.circle.closed {
width: 0%;
height: 0%;
margin-left: 100%;
margin-top: 100%;
}
Codepen: https://codepen.io/anon/pen/peLrBG
As you can see, the image shrinks with the circle. I need the image to have no movement. How can I achieve this? Also, is there a better way to achieve a square with a rounded corner effect? Thank you.
There is a clip-path CSS property that allows to achieve the desired effect.
.circle {
...
clip-path: circle(50% at center);
}
.circle.closed {
clip-path: circle(0 at center);
}
How do I zoom in a high quality image, for instance 2000px x 2000px, to the center of a container ? I've tried using transform: scale () but it still makes it scrollable vertically or horizontally. I'm specifically looking for a mobile version. How do I make the image zoomed in centered exactly according to the width of mobile? Using width: 100% doesn't help either. And if I define it like in the code below using pixels it is cropped out on mobile. Do I make it exactly width and height or mobile or? I need it to fully cover whole body and be zoomed in exactly in the center of image. Thanks for you answers. Also zoomed quality is really bad even though it is high quality image.
Basically center and zoom this image so that on mobile it will cover whole screen, spin and look like this:
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
}
#wrap {
transform: scale(2.0);
}
#bg {
width: 1400px;
height: 1400px;
background: url(bg.png);
background-size: contain;
background-position: center center;
-webkit-animation: rotation 9s infinite linear;
}
I have been playing around with this a bit. This is what I ended up with.
Here is the logic that I used figuring this out:
An image rotates around its center.
If I put the image in a container it will cut a part of the image off. The image will still rotate around the center of the image....But that is not the center of the container anymore.
Solution: I made the image behave like background: cover; by using min-width: 100%; and min-height: 100%;
Solution: I centered the image in the container using flexbox.
Another way of centering might be preferable, since the flexbox also affects other children of the container. So any improvements/comments about that would be welcome :).
html
<div id="wrapper">
<img src="data:image/png;base64,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" id="image"/>
</div>
css
#keyframes zoom-effect {
0% {
transform: scale(1) rotate(0deg);}
100% {
transform: scale(4) rotate(360deg);}
}
#wrapper{
height: 250px;
width: 350px;
border: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#image{
z-index: -100;
min-height: 100%;
min-width: 100%;
animation-name: zoom-effect;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Hope it helps :)
Set width: 100% and remove background-size: contain:
JSFiddle
#bg {
width: 100%;
height: 500px;
background: url(http://placehold.it/1000x1000);
background-position: center;
background-repeat: no-repeat;
}
<div id="bg"></div>
and if you want to use these styles for the body, add background-attachment: fixed:
JSFiddle
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
background: url(http://placehold.it/1000x1000);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
You could use background-size: 200% combined with background-position: -50%, -50% or a similar proportion (300% size vs. -100% position offset)
Example:
.x {
width: 400px;
height: 300px;
margin: 100px;
background: url(http://placehold.it/400x400/fa0);
background-size: 300%;
background-position: -100%, -100%;
}
<div class="x">
</div>
About rotation: You can rotate the whole thing, but not the background image alone, so you have to use two DIVs: Put one rotating div into another (smaller) div that has overflow: hidden.The rotating DIV has to have position: absolute and z-index: -1 to remain in the background.
Here's that situation in action:
.y {
width: 400px;
height: 300px;
margin: 100px;
overflow: hidden;
position: relative;
}
.x {
position: absolute;
width: 800px;
height: 600px;
left: -200px;
top: -100px;
z-index: -1;
background: url(http://placehold.it/400x400/fa0);
background-size: 300%;
background-position: -100%, -100%;
animation: move 5s infinite linear;
}
#keyframes move {
100% {transform: rotate(360deg);}
}
<div class="y">
Any content here.
<div class="x">
</div>
</div>