.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff}
.hovereffect{float:left;position:relative;cursor:default}
.hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.hovereffect img{display:block;width:100%;height:250px;position:relative;-webkit-transition:all .4s linear;transition:all .4s linear}
.hovereffect h2{position:relative;font-size:17px;background:#DF691A;-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;padding:10px}
.hovereffect a.info, .hovereffect:active a.info{text-decoration:none;display:inline-block;border:1px solid #fff;background-color:#DF691A;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:80px 0 0;padding:7px 14px}
<div class="col-md-4">
<div class="thumbnail">
<div class="hovereffect">
<img src="./images/javascriptcalculator.png" alt="javascript calculator">
<div class="overlay">
<h2>React Calculator</h2>
<a class="info" href="https://codepen.io/azambadar/pen/GBzOzN" target="_blank">Demo Here</a>
</div>
</div>
</div>
</div>
I am using bootstrap and have an image with hover effect which is triggered by the pointer, hover effect (h2 and a elements) appears when cursor comes on the image but this hover effect is not working on mobile devices and I want to change this through CSS media queries so h2 and a elements appear permanently on the image without hover effect.
How can I achieve this ?
Below are my html and css codes, please check and let me know if this is possible.
<div class="col-md-4">
<div class="thumbnail">
<div class="hovereffect">
<img src="./images/javascriptcalculator.png" alt="javascript calculator">
<div class="overlay">
<h2>React Calculator</h2>
<a class="info" href="https://codepen.io/azambadar/pen/GBzOzN" target="_blank">Demo Here</a>
</div>
</div>
</div>
</div>
Here is the CSS part
.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff}
.hovereffect{float:left;position:relative;cursor:default}
.hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.hovereffect img{display:block;width:100%;height:250px;position:relative;-webkit-transition:all .4s linear;transition:all .4s linear}
.hovereffect h2{position:relative;font-size:17px;background:#DF691A;-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;padding:10px}
.hovereffect a.info, .hovereffect:active a.info{text-decoration:none;display:inline-block;border:1px solid #fff;background-color:#DF691A;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:80px 0 0;padding:7px 14px}
Many thanks
I think you can detect if the user is using a touch-based device, for example using the function mentioned here:
Detecting a mobile browser
And then add a class to your element which always display the desired effect otherwise displayed on :hover
Hope this helps
Related
I have an image that has an ease-in-out opacity effect when I hover over it. I like the transition effect but not the color of the image when I hover over it. I can't figure out to change the color of my images when I hover over them. background-color: #50b948; does nothing. What am I doing wrong? Here is my CSS and HTML below.
#about img {
margin: 0 auto;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
background: #50b948;
opacity: 0.6;
}
HTML
<div class="row">
<div class="col-md-4">
<a href="bios/teamBioNeil.html">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>Chairman & CEO<br>
Senior Wealth Advisor</h3>
</div>
<div class="col-md-4">
<a href="bios/teamBioJeff.html">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>President<br>
Senior Wealth Advisor</h3>
</div>
<div class="col-md-4">
<a href="bios/teamBioKim.html">
<div class="imgAbout">
<img src="img/team/kim580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>Chief Operating Officer</h3>
</div>
</div> <!-- end row -->
you want to apply the background color of the div that contains the image - rather than the image itself - then when you reduce the opacity of the image the background will show through.
.imgAbout{
background: #50b948;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
opacity: 0.6;
}
and incidentally - you have too many H1's - semantically you should only have 1 H1 per page (or section) and then the others are H2's eg: page H1 could be "Staff" and then each named below would be H2's or 3's.
I have a website, on it, links that container img tags will transition the opacity for the image tag to be less than 100%. This seems to work well with all images except for one and it only happens on ONE page. At the bottom of this page http://www.saerdesigns.com/ there is a VetPros imag, when I hover over it on Chrome (unsure of other browsers), the transition stops and starts and ultimately looks very bulky. It doesn't appear to do this with any other images on the same page, and also, the image in this page using the same stylesheet file appears to work fine http://www.saerdesigns.com/jobs.
Here is my relevant CSS:
a {
text-decoration: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
&:hover, &:active, &:link {
text-decoration: none;
}
}
a {
img {
#extend a;
&:hover {
opacity: 0.8;
}
}
}
And here is the HTML code (it might look weird, but that's because I am using Angular):
<section class="container-fluid buffer" id="scroll-send-3">
<div class="center-block text-center" ng-show="jobs[0]">
<div class="row">
<div ng-repeat="job in jobs" class="col-md-4 job">
<a ui-sref="^.jobs.show({id: job.id})">
<img class="img-responsive center-block" alt="{{job.company}}" ng-src="{{job.image_small}}"/>
</a>
<ul>
<li>{{job.title}}</li>
</ul>
</div>
</div>
<div class="btn-group">
<a class="btn btn-default btn-lg" ui-sref="^.jobs">Work history</a>
</div>
</div>
</section>
How can I prevent this from happening? And why is this happening?
Thanks so much!
~The :hover works fine if you add position: relative;.
Maybe better to add transform: translate3d(0, 0, 1px); instead. I think the issue is because you are using opacity.
I don't have the explanation at hand right now, would have to go digging. Maybe tomorrow I can find the explanation again.
while i was creating a website i stepped into something unexpected.
https://jsfiddle.net/m9qgxeke/3/
As you can see after an image has expanded it returns to it's original size, but the div after jumps over it. I tried everything i could think of, but nothing worked. Is there a way to prevent this to happen?
HTML
<div class="img-gr transition">
<img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 1">
</div>
<div class="img-gr transition">
<img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 2">
</div>
<div class="img-gr transition">
<img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 3">
</div>
CSS
.transition img {
display: block;
transition: transform .2s ease;
-moz-transition: transform .2s ease;
-webkit-transition: transform .2s ease;
-ms-transition: transform .2s ease;
-o-transition: transform .2s ease;
position: relative;
z-index: 2;
}
.transition img:hover, .transition img:active {
transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
z-index: 10;
}
Simply remove the position: relative; from .transition img
This works for me in Chrome: https://jsfiddle.net/m9qgxeke/8/
The trick is to make a transition on the z-index-property that starts after the 0.2 seconds (when the image is back in place):
transition: transform .2s ease, z-index 0.2s 0.2s;
But this would apply to the "in-transition" (smaller image to bigger image) as well, which we don't want, so we have to disable the z-index-transition for the "in-transition" with the active-pseudo-selector:
.transition img:active {
transition: transform .2s ease, z-index 0s;
}
Code is shortened for clarity.
Edit: bumpys solution is much more simple and recommendable, my approach also works for position: relative-elements, in case this is an requirement (which I don't suspect for simple images).
I'm working on a virtual tour which involves the user clicking arrow images depending on the location they wish to go, which will then display a new image of the corresponding location. I would like to gradually transition between the images when the user clicks, however I'm having trouble doing so within this particular context. These are the basics of what I have in my HTML:
<div id="tour_images" class="pics">
<section id="beginning">
<div class ="arrow">
<a href="#two">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<img src="imgs/beginning.jpg" />
</section>
<section id="two">
<div class="arrow">
<a href="#three">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<div>
<img src ="imgs/two.jpg" />
</div>
</section>
<section id="three">
<div class="arrow">
<a href="#four">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<div>
<img src ="imgs/three.jpg" />
</div>
</section>
<section id="four">
<div class="arrow">
<a href ="#beginning">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
<div>
<img src ="imgs/four.jpg" />
</div>
</div>
</section>
And here's my CSS:
section {
display:none;
}
section:target{
display:block;
}
section img {
opacity: 0;
transition: 500ms opacity;
}
section:target img {
opacity: 1;
}
As expected, the targeted sections display on click, however the transition of the images on-click isn't working (rather the images just immediately pop up). Can anyone see what I'm doing wrong here?
UPDATE: I've managed to come up with a solution on this which involves changing the CSS to the following (note there is a button at the beginning that, once clicked, displays the first section):
section {
opacity: 0;
transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-khtml-transition: opacity 1s ease-out;
-webkit-transition: opacity 1s ease-out;
height: 0;
overflow: hidden;
}
section:target{
display:block;
opacity: 1;
height: auto;
}
Depending on the browser and its version you might have to include specific rules:
section img {
opacity: 0;
transition: 500ms opacity;
-o-transition: 500ms opacity;
-ms-transition: 500ms opacity;
-moz-transition: 500ms opacity;
-khtml-transition: 500ms opacity;
-webkit-transition: 500ms opacity;
}
Yes, that is annoying, but sometimes required.
I have two links (one a text link and one an image link): see image
How would I go about removing the border-bottom style for links that are images but keep them for links that are texts
CSS:
a {
color: #28c3ab;
border-bottom: 1px dotted #28c3ab;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
Add a class to remove the border from some links.
CSS:
a.img {
border: none;
}
HTML:
This has a border
<a class="img" href="#"><img sc="" alt="No border" /></a>