I'm trying to do a photo gallery. I have this code:
<head>
<style>
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.box {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
}
.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.box:target {
outline: none;
width: 100%;
height: 100%;
opacity: 1;
}
.box:target img {
border: solid 17px rgba(77, 77, 77, 0.8);
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45%;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}
</style>
</head>
<body>
<img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<div class="box" id="img1">
prev
X
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
next
</div>
<div class="box" id="img2">
prev
X
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
next
</div>
<div class="box" id="img3">
prev
X
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
next
</div>
</body>
But I want to add animation. I want the photos to come from the left when I click on "next" and from the right when I click on "prev", like a slider.
Is it possible to achieve it with CSS? For example with transform property? If not what script should I use?
You can do something like this with radio buttons. If you have a radio button at the top for each transition you want to make, you can use CSS to select on every radio button there is and add the CSS transitions as needed. Use <label>s instead of <a>s to check the radio buttons, and then make the actual radio buttons invisible. But this would take a lot of code and wouldn't scale very well. So if you plan on having more images, you have to add CSS for each on individually, which can be a lot of work.
Here is a quick example putting the images into a reel and sliding the whole thing side to side. It may not be exactly what you want, but it is much less code. It's at least a good starting place.
<head>
<style>
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.reel-wrapper {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
overflow: hidden;
}
.reel {
position: absolute;
width: auto;
height: auto;
display: flex;
transition: left 1s ease-in-out;
}
#radio-close:not(:checked) ~ .reel-wrapper {
outline: none;
width: 100%;
height: 100%;
opacity: 1;
}
.box {
position: relative;
width: 100vw;
height: 100vh;
}
.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
border: solid 17px rgba(77, 77, 77, 0.8);
}
input[type="radio"] {
display: none;
}
#radio-img1:checked ~ .reel-wrapper .reel {
left: 0;
}
#radio-img2:checked ~ .reel-wrapper .reel {
left: -100vw;
}
#radio-img3:checked ~ .reel-wrapper .reel {
left: -200vw;
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45vh;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}
.btn-prev {
left: 5vw;
}
.btn-next {
right: 5vw;
}
</style>
</head>
<body>
<input id="radio-close" type="radio" name="gallery-nav" checked>
<input id="radio-img1" type="radio" name="gallery-nav">
<input id="radio-img2" type="radio" name="gallery-nav">
<input id="radio-img3" type="radio" name="gallery-nav">
<label for="radio-img1"><img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"></label>
<label for="radio-img2"><img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80"></label>
<label for="radio-img3"><img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80"></label>
<div class="reel-wrapper">
<div class="reel">
<div class="box" id="img1">
<label for="radio-img3" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<label for="radio-img2" class="light-btn btn-next">next</label>
</div>
<div class="box" id="img2">
<label for="radio-img1" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<label for="radio-img3" class="light-btn btn-next">next</label>
</div>
<div class="box" id="img3">
<label for="radio-img2" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<label for="radio-img1" class="light-btn btn-next">next</label>
</div>
</div>
</div>
</body>
Typically this kind of thing would be easier to do with JavaScript. You could just keep track of which image you are looking at, and then on clicking a button toggle the right classes to make CSS do the actual animation. It is much easier to manage for scale. But pure CSS solutions are always more fun.
Related
I would like to add a link to an image that has an overlay applied to it. When users hover over the image they get an opaque overlay and text appear. This works great, however I also need users to be able to click that image and taken to a link.
I have pasted my code below - the overlay works but the link portion does not. I believe it's because the overlay is interfering. I tried changing the placement of the link but was unable to do so. I am able to make the '+' be the link, but ideally the entire image should link.
Any thoughts?
JSFiddle
.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #cdcbca;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s, visibility .2s;
}
.roomphoto {
height: 166px;
}
.img__description {
transition: .2s;
transform: translateY(1em);
z-index: 999;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content:"";
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.overlay:hover:after {
opacity: .8;
}
.blue:after {
background-color: #1a3761;
}
.img__description a {
color: #fff;
}
.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}
.roomselect img {
width: 100%;
margin-bottom: -10px;
}
.room3 {
width: 32%;
text-align: left;
float:left;
}
<div class="roomselect"><div class="room3">
<div class="roomphoto overlay blue">
<a href="http://www.google.com">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
</a>
<div class="img__description_layer">
<p class="img__description">
<span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
</p>
</div>
</div>
</div>
You need to rearrange your html in such a way that when you click on image, you are actually clicking on the anchor tag. I have made some changes to your html, let me know if these work. You might have to increase roomphoto height.
<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
<div class="roomphoto overlay blue">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
<div class="img__description_layer">
<p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
</div>
</div>
</a>
</div>
</div>
Hi guys i am trying to get my button in bootstrap 3 to overlap my image, i understand the use of z-index 1 but i cant seem to get it to work at all.
HTML:
.btn-warning {
color: #fff;
background-color: rgba(255, 198, 0, 0.9);
border: 0;
padding: 20px;
border-radius: 26px;
line-height: 0.428571;
}
.aboutpic {
margin-bottom: 19px;
}
<div class="aboutpic">
<img src="//via.placeholder.com/350x150" class="img-responsive">
<button type="button" class="btn btn-warning">Download CV</button>
</div>
Try this:
.btn-warning {
color: #fff;
background-color: rgba(255,198,0,0.9);
border: 0;
padding: 20px;
border-radius: 26px;
line-height: 0.428571;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You'll need to add a position: absolute; and a z-index: 1 to the button so that it can sit on top of the image.
codepen.io/lauraeddy/pen/KXEwOW
You can set the position of aboutpic to relative and the button to absolute, as in the following example.
UPDATE
Added style attributes to center the button over an arbitrarily sized image, using calc(50% - [button width or button height]).
.btn-warning {
color: #fff;
background-color: rgba(255, 198, 0, 0.9);
border: 0;
padding: 20px;
border-radius: 26px;
line-height: 0.428571;
width: 120px;
height: 50px;
}
.aboutpic button {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 60px);
}
.aboutpic {
margin-bottom: 19px;
position: relative;
width: 350px;
height: 150px;
}
<div class="aboutpic">
<img src="http://via.placeholder.com/350x150" class="img-responsive">
<button type="button" class="btn btn-warning">Download CV</button>
</div>
Please try the following,
.btn-warning {
color: #fff;
background-color: rgba(255,198,0,0.9);
border: 0;
padding: 20px;
border-radius: 26px;
line-height: 0.428571;
}
img{
height:200px;
width:200px;
}
.aboutpic{
position:relative;
}
.first{
position:absolute;
z-index:1;
}
.second{
position:absolute;
z-index:2;
left:20px;
top:50px;
}
<div class="aboutpic">
<div class="first">
<img src="https://static.pexels.com/photos/377911/pexels-photo-377911.jpeg" class="img-responsive">
</div>
<div class="second">
<button type="button" class="btn btn-warning">Download CV</button>
</div>
</div>
Hope this helps.
I have some text within a div that I do not want the opacity to affect; I want the text to be 100% fully opaque but the background color to be 50% opaque.
So far I have been unsuccessful.
HTML:
<div class='photo'>
<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
<div class='photo-name'><span>Name</span></div>
</div>
CSS:
.photo {
border-radius: 6px;
border: 1px solid #ccc;
width: 298px;
height: 298px;
margin-top: 10px;
margin-left: 10px;
float: left;
overflow: hidden;
position: relative;
}
.photo-name {
position: absolute;
bottom: 30px;
width: 100%;
padding: 0.5em;
text-align: center;
background-color: #666666;
color: #fff;
opacity: 0.5;
}
.photo-name > span {
opacity: 1;
}
Result: https://jsfiddle.net/w71677jm/
You can use RGBA color
.photo-name {
position: absolute;
bottom: 30px;
width: 100%;
padding: 0.5em;
text-align: center;
/*background-color: #666666;*/
background-color:rgba(102,102,102,0.5);
color: #fff;
/*opacity: 0.5;*/
}
Ok Robert. How's this.
The solution is
rgba(102,102,102, 0.5);
rgba = red,green,blue,alpa channel
(102,102,102) = #666666
0.5 = your 50% transparent
Check out the SO Snippet below or this forked fiddle JSFiddle
Hope this helps!
Best,
Tim
.photo-name {
position: absolute;
bottom: 175px;
width: 300px;
text-align: center;
background-color: rgba(102,102,102, 0.5);
color: #fff;
padding-top:.5em;
padding-bottom:.5em;
}
<div class='photo'>
<div class='image'>
<a href='#'>
<img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'>
</a>
</div>
<div class='photo-name'>
<span>Name</span>
</div>
</div>
I have a small bug that I can't seem to locate. In my snippet you can see how whenever you hover over the image, opactiy and an image scale takes place, as well as a box comes over the image. That is perfect, but my issue is whenever you hover over the text below it, the hover effect takes place over the image.
I can't seem to figure out how for the hover effect to only take place when the mouse is hovering over the image.
Any suggestions would be appreciated.
$('.home-img-block img').addClass(function() {
return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 750px;
}
.home-img-block {
width: 33.33%;
float: left;
display: block;
overflow: hidden;
position: relative;
}
.home-img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-container:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-container:hover:after {
opacity: 1;
}
.home-img-block img {
display: block;
transition: all 1s ease;
}
.home-img-block:hover img {
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
overflow: hidden;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
#home-img-block-wording-container {
width: 100%;
height: 300px;
}
.home-img-wording-blocks {
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 30px;
font-size: 1.7em;
}
.home-img-wording-block-description {
padding: 25px 50px 0 50px;
font-size: 1.1em;
color: #5d5d5d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
</div>
.home-img-block:hover .overlay
and
.home-img-block:hover img
replace them with
.home-img-container:hover .overlay
.home-img-container:hover img
otherwise you're triggering when you hover over the whole container instead of only wheen hovering the img one.
I'm writing an online chatting widget and I plan to design it as Facebook's.
In my page, a bar is fixed on the bottom, and every chat rooms are contained in that bar.
While the bar's height is fixed, the chat rooms cannot extend its height outside the bar.
Is there any method to achieve this? I have used z-index, !important, and overflow, but all failed.
CSS:
#SNbar {
background-color: rgba(203, 203, 203, 0.80);
position: fixed;
bottom: 0;
width: 100%;
height: 25px;
z-index: 900;
overflow: visible;
}
#chatSessions {
position: relative;
bottom: 0;
float:right;
z-index: 901;
}
.chatSession {
/*
position: fixed;
bottom: 0;
*/
padding: 0 10px 0 0;
width: 260px;
float: right;
z-index: 999;
}
.CStitle {
height: 25px;
background-color:#3B5998;
cursor: pointer;
}
.CStitle .titleText{
text-decoration: none;
font-weight:bold;
color: #FFFFFF;
text-decoration: none;
line-height:2em;
}
.CSbody {
background-color: #FFFFFF;
opacity: 1.0;
display: none;
height: 0 !important;
}
.opened{
min-height: 260px !important;
display: block;
}
.CSMsgContainer {
overflow-y: scroll;
height: 210px;
}
HTML:
<div id="SNbar">
<div id="chatSessions">
<div class="chatSession" id="Div4">
<div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span> </div>
<div class="CSbody">
<div class="CSMsgContainer">
<div class="message">b: test1</div>
<div class="message">b: this is used to test css</div>
<div class="message">a: This may be help</div>
</div>
</div>
</div>
<div class="chatSession" id="Div8">
<div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span></div>
<div class="CSbody">
<div class="CSMsgContainer">
<div id="Div9" class="message">d: hi C!!</div>
<div id="Div10" class="message">c: Hello D~~</div>
<div id="Div11" class="message">
c: We are the second chat session
</div>
</div>
</div>
</div>
</div>
</div>
position:absolute for the inner container is what you want. Then you can put it anywhere you want. Best is probably to set position:relative to the parent container, so that the position of the inner containers will using the parent as "base".
If I am not wrong, from this when you click on .CStitle, you are toggling the CSbody. So for this, you can set position relative to chatSession class and to the CSbody, give position absolute.
.chatSession {
position: relative;
padding: 0 10px 0 0;
width: 260px;
float: right;
z-index: 999;
}
.CStitle {
height: 25px;
background-color:#3B5998;
cursor: pointer;
}
.CSbody {
position:absolute;
background-color: #FFFFFF;
opacity: 1.0;
display: none;
height: 0;
bottom:25px;
}
.opened{
min-height: 260px;
display: block;
}
.CSMsgContainer {
overflow-y: scroll;
height: 210px;
}
Hope this helps.
try adding this
#SNbar {
height: 25px;
max-height: 25px;
}