Develop Reference

Make button under image clickable

I'm trying to code a little 'card' that has an image, which when you hover in, it fades the image out and shows up a button which I'm trying to make clickable. The problem is that the button cannot be clicked since it's under the image and when you click on it, it registers as a click on the image. I know I could make it so the user can just click the image, but that doesn't work well on mobile since you cannot hover without clicking.
Here's my HTML: (note: this is a basic version of my actual cards)
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
//background: #1D1E28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card img:hover {
opacity: 0;
}
<div class="card" style="height: 18rem; width: 18rem;">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="...">
<div class="card-body" style="height: 172px;">
</div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">Manage server</button>
</div>
</div>

The solution what i see might be if hover handler will be on the .card:hover img not the .card img:hover. And remove form the image event with pointer-events: none;
.card:hover img {
opacity: 0;
pointer-events: none;
}
document.querySelector('button').addEventListener('click', ev => {
console.log('click');
ev.target.textContent = 'cliked';
});
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
background: #1d1e28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card:hover img {
opacity: 0;
pointer-events: none;
}
<div class="card" style="height: 18rem; width: 18rem">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="..." />
<div class="card-body" style="height: 172px"></div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">
Manage server
</button>
</div>
</div>

How to condition styling child by hover on parent only?

In the code below when I hover on the gray button [the parent]
it perform some style on the child div bar
and that is what I need, I don't want child to be hovered itself
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?
Would this fix your issue?
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .baz:not(:hover) .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript, so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
This works because the events mouseover and mouseout events are explicitly added to foo, rather than to its grandchild bar (and bar never visibly overlaps foo).
Working Example:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.foo.hovered .bar {
transform: scaleX(1);
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

How to hide a css class in a specific slider?

I am using a bootstrap slider with a burger menu at the top, and i want to show it in every slide except for the first one. Do i have to use this burger class in every slide except for the first one? Or there is simpler way to do that? Any kind of help would be much appreciated
HTML:
<body>
<div class="navigation">
<div class="burger_deluxe">
<span class="burger_global top_bun"></span>
<span class="burger_global patty"></span>
<span class="burger_global bottom_bun"></span>
</div>
</div>
<div class="carousel-item first_slide">
</div>
<div class="carousel-item second_slide">
</div>
<div class="carousel-item third_slide">
</div>
</body>
CSS:
.navigation {
width: 100%;
height: 60px;
z-index: 400;
position: absolute;
}
.burger_deluxe {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
width: 34px;
height: 40px;
z-index: 3;
}
.burger_deluxe .burger_global {
position: absolute;
border-top: 5px solid white;
width: 100%;
}
.burger_deluxe .burger_global.top_bun {
top: 0;
border-radius: 20px;
transition: transform 500ms ease, border 500ms ease;
transform-origin: left center;
}
.burger_deluxe .burger_global.patty {
top: 12px;
border-radius: 20px;
transition: opacity 500ms ease;
}
.burger_deluxe .burger_global.bottom_bun {
top: 24px;
border-radius: 20px;
transition: transform 500ms ease, border 500ms ease;
transform-origin: left center;
}
.burger_deluxe.open span {
border-color: white;
}
.burger_deluxe.open .top_bun {
transform: rotate(45deg);
}
.burger_deluxe.open .patty {
opacity: 0;
}
.burger_deluxe.open .bottom_bun {
transform: rotate(-45deg);
}

move button from right to left on hover with css3 animation

I am trying to reproduce the effect of the button on the right of this page.
Begin position :
End position after animation :
I have done this HTML code :
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
And CSS :
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: 0;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
For the moment, my code show the end position but i don't know how to do to perform the same translation effect on my div.
Could you help me ?

I think this is what you want. Still any queries feel free to ask.
body
{
overflow-x:hidden;
}
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -135px;
transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
#btnFeedbackHome:hover
{
right: 0px;
}
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>

You can achieve this with a simple CSS transition on the element. I've created a JSFiddle that builds on your example to show how to do this with no JavaScript as the only thing you need is a hover added to the main container. http://jsfiddle.net/cudome3h/1/
If you do everything that you did and just change the CSS to what I have here you will get a similar effect:
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -140px;
background-color: #35BDCF;
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#btnFeedbackHome:hover {
right: 0;
}

Twitter Bootstrap not working in CodeIgniter website but working in fiddle

My Problem is that i cant get the twitter bootstrap to work in my website
whereas it works perfectly fine in the fiddle: http://jsfiddle.net/Mns8q/32/
Can anyone tell me what is the problem.?
Thanks in advance.
This code is present in the view that is called when you reach the url in my website, which is same as the fiddle :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js" ></script>
<style>
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.menu {
height:100%;
/* background-color: #3D6AA2; */
&.collapse {
float:left;
height: 100% !important;
width: auto;
}
&.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
&.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
&.collapse.in.width {
width: auto;
}
&.collapse.in.height {
height: auto;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
}
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
changeContent = function(key) {
html = textHash[key];
$('#contentm').html(html);
}
$("#menu a").click(function(e) {
$('#menu').collapse('hide');
changeContent(e.target.innerText);
});
textHash = {
"Futurama": "<h1>Bendin' in the Wind</h1><p>Oh, but you can. But you may have to metaphorically make a deal with the devil. And by \"devil\", I mean Robot Devil. And by \"metaphorically\", I mean get your coat. Say what? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Michelle, I don't regret this, but I both rue and lament it.</p>",
"Star Wars": "<h1>The Empire Strikes Back</h1><p>Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>",
"Doctor Who": "<h1>The Poison Sky</h1><p>Stop talking, brain thinking. Hush. You hit me with a cricket bat. You've swallowed a planet! Stop talking, brain thinking. Hush. It's a fez. I wear a fez now. Fezes are cool. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</p>"
};
});
</script>
</head>
<body>
<div class="frame">
<div id="menu" class="menu nav-collapse collapse width">
<div class="collapse-inner">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
Menu
</div>
</div>
<ul class="nav nav-tabs nav-stacked">
<li><a>Futurama</a></li>
<li><a>Star Wars</a></li>
<li><a>Doctor Who</a></li>
</ul>
</div>
</div>
<div class="view">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="contentm">
Integer eu quam et lacus luctus molestie.
</div>
</div>
</div>
</body>
</html>

It appears that you are not using SCSS on your site, while you are on the jsfiddle.
You could re-write your CSS as follows:
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
}
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
.menu {
height:100%;
}
.collapse {
float:left;
height: 100% !important;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}