So I'm trying to make an image and it's background fade in when you click it using the :target selector. (Similar to Lightbox: http://lokeshdhakar.com/projects/lightbox2/, but css only).
html:
<img src="img/thumb-3.jpg">
<img src="img/thumb-4.jpg">
<img src="img/image-3.jpg">
<img src="img/image-4.jpg">
css:
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
background: rgba(38, 38, 38, 0);
transition: background 0.3s ease;
}
.lightbox img {
max-height: 90%;
max-width: 70%;
margin: 3%;
border-radius: 5px;
border: 5px solid #cbcbcb;
}
.lightbox:target {
display: block;
background: rgba(38, 38, 38, 0.7);
}
Only problem: it doesn't work. It tried it with other elements and it worked just fine. Any suggestions? Thanks.
Your code works in some way, but not completed. I have improved it based on your code and here's a working cross browser and responsive DEMO
Still using your :target selector.
Related
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
How to overlay images
(11 answers)
Closed 1 year ago.
I want to make one image as a background for another (it will be the same image). This is going to work only on mobile version of site. I was trying different combinations of positions and displays, but it doesn't work and this is as far as I could get:
This is how my Vue code looks like:
<div class="img-big">
<img
v-if="productCard.file"
:src="`${productCard.file}`"
:alt="productCard.altText || productCard.text"
class="blur-background-img"
>
<img
v-if="productCard.file"
:src="
`${productCard.file}`
"
:alt="productCard.altText || productCard.text"
/>
</div>
And this is scss code:
.img-big {
img {
display: block;
margin: 0px auto;
#media only screen and (max-width: 420px) {
z-index: 2;
width: 70%;
top: 0;
}
}
.blur-background-img {
z-index: 1;
filter: blur(8px);
margin: 0;
width: 100%;
}
}
The only thing that I know works correctly is z-index, but I need to put one image (not blurred) on another (blurred, as a background)
Use position: relative for blurred image and position: absolute for another one so that it can be positioned relative to blurred one .
#outerCircle {
position: relative;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#styleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 10%;
/*Used to reposition*/
left: 10%;
/*Used to reposition*/
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
<div id="outerCircle">
<div id="styleCircle"></div>
</div>
I'm using Bootstrap 4 for a custom wordpress theme. I've readed this short article where is explained how to create an animated underline on hover. On desktop all works fine but on mobile the underline will take the 100% of the width under the menu elements. Is possible to fix?
here is the css code I'm using:
.top{
position: relative;
color: black;
}
.top:hover{
color: rgb(28,67,63);
}
.top:hover:after{
width: 100%;
}
.top:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid rgb(28,67,63);
transition: 0.4s;
}
To be more clear here is an image of the problem that is happening
mobile underline
I've solved using the inline-block display property on mobile.
.top{
display: inline-block;
}
First Try to arrange your CSS code, .top:hover::after must come after .top::after,
also, the trick that on mobile the element take the full width, so try to give the element specific width on mobile screens.
Try this code, it's work fine.
<div class="top">
Hi
</div>
.top{
position: relative;
color: black;
width: 50px;
}
.top::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid rgb(28, 67, 63);
transition: 0.4s;
}
.top:hover{
color: rgb(28, 67, 63);
}
.top:hover::after{
width: 100%;
}
I want to reach this result:
This is what i have atm: http://mijnwebsitebestellen.be/index.php
So i am currently using SVG elements to slice of the images. You can inspect the code in your browser. I can't get the result right because of z-index issues.
Any tips or examples of any sort are appreciated.
You can achieve the same result using pure CSS.
Use a container element for background color and image
Use the pseudo element ::after with a white right border to imitate the right edge
Use some divs of the same class .tile to imitate the stripes with transform: skewX(-10deg); and let them float: right;
Et voilà:
.container {
height: 300px;
width: 400px;
background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.stack.imgur.com/e11Va.jpg);
background-size: cover;
color: white;
position: relative;
padding-right: 26px;
}
.container::after {
content: "";
position: absolute;
display: block;
right: 0;
bottom: 0;
height: 0;
width: 0;
border: none;
border-left: none;
border-right: 52px solid white;
border-top: 300px solid transparent;
border-bottom: none;
}
.tile {
width: 30px;
height: inherit;
background: rgba(0, 0, 0, 0.6);
border-left: 5px solid white;
transform: skewX(-10deg);
float: right;
}
<div class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
Of course you can add content to the container. Just use another div inside the container and give it the apropriate width.
I have the following div:
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
and I want the text and button to appear centred within the div. Currently it appears like so:
and I am having no luck getting to centre. Here is the css for the transparent-panel div:
.transparent-panel {
padding: 40px 20px 40px 20px;
width: 100%;
height: 100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
I tried using position: relative; on the div and then position: absolute; on the h3 and a tag but that didn't work.
If anyone can help me out it would be much appreciated. I am using Bootstrap 3.
Here is a bootply demo http://www.bootply.com/sQ5gyYn7Ru
One way to do it would be to wrap the panel in a container, put the background color on the container and then use a few lines of CSS to vertically center the panel within the container:
HTML:
<div class="panel-container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
</div>
CSS:
html,body {
height:100%;
}
.panel-container {
height:100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
padding: 40px 20px 40px 20px;
width: 100%;
text-align:center;
/* Code to vertically center below */
position: relative;
top: 50%;
transform: translateY(-50%);
}
Bootply Example
I find it useful to set the container div as display: table, and wrap the content in a inner div set as display: table-cell.
Then you can use the vertical-align property:
Updated BootPly
/* CSS used here will be applied after bootstrap.css */
.teachers-image {
background-size: cover;
height: 418px;
color: #ffffff;
}
.transparent-panel {
padding: 0 20px;
display: table;
width: 100%;
height: 100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel > div {
display: table-cell;
vertical-align: middle;
}
.btn-white-big {
background-color: #ffffff;
height: 50px;
color: #339933;
font-size: 18px;
font-weight: 500;
line-height: 30px;
#include add-border(3px, white, all);
#include border-radius(30px);
&:hover,
&:focus,
&.focus {
background-color: #339933 !important;
color: white;
}
}
<div class="teachers-image">
<div class="transparent-panel">
<div>
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
</div>
</div>
Use a container with View Height for top to bottom centering:
height: 100vh;
The View Height will always use the windows display height.
Fiddle
HTML:
<div class="container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
</div>
CSS:
.container {
height: 100vh;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
width: 100%;
text-align:center;
position: relative;
top: 50%;
}
I have two problems with my portfolio section which is not as smooth as I want it to be. Here they are:
I wanted my projects to change background-color and show a small plus sign when hovering over them. In the same time I wanted to add a "transition: all 0.5s ease-in-out;" but the result is not what I expected. It probbaly happens because my "plus sign" should be located in another div but I didn't know how to make it work. Instead I put it here:
.projectshot a .over:hover{
position: absolute;
background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
This is the effect I wanted to achieve: http://bjorsberg.se/
The second problem that bothers me is that, if you look really carefully, when you approach each of the projects with the mouse the mouse pointer starts to "dance" and it behaves crazy??? How can I fix that???
Here is my JSFiddle:
http://jsfiddle.net/8fCMA/2/
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
I am quite new to web design (4 months since I started learning) and I am clearly not good with positioning div's inside div inside another div... So, please feel free to correct my fiddle if you see any trouble I created. Thanks!
I would simplify the html structure if I were you, as it is not necessary.
e.g.: projectshot can look like this:
<div class="projectshot">
<a href="http://www.yahoo.com" target="_blank">
<img alt="Sushi" src="...">
</a>
</div>
and you can add the "cover" as :before pseudoelement.
Then - in css all you need to do is to add this to the "cover" element:
opacity: 0;
transition: opacity .2s;
and - on hover - change the opacity to 1:
opacity: 1;
here's the updated demo
(I've removed a lot of your html/css code just for demo purposes)
I've just made some small changes including:
Moving the hover to the .projectshot box.
Moving background-position and background-repeat to the non
hover definition.
Adding the transitions.
It works for now but you can still remove a lot of code. Even the html can be heavily reduced.
I suggest you to have a look at that too (DEMO).
.projectshot{
position: relative;
padding: 10px;
height: 150px;
margin-bottom: 30px;
display: inline-block;
}
.projectshot img{
height: 150px;
width: 200px;
border-radius: 8px;
-webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
-moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
box-shadow: 0 9px 13px rgba(0,0,0,.14);
}
.projectshot:hover .over{
background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
background-color: rgba(51, 51, 51, 0.6);
transition: all 0.5s ease-in-out;
}
.projectshot:hover {
cursor: pointer;
}
.over{
position: absolute;
border-radius: 8px;
height: 150px;
width: 200px;
box-sizing:border-box;
-moz-box-sizing:border-box;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.5s ease-in-out;
}
.inner{
background: rgba(113,122,137,.85);
border-radius: 8px;
width: 100%;
height: 100%;
display: none;
}
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}