I am a beginner. I am working on this webpage
salesletter. I am trying to change the button color of the add-to-cart buttons by changing their image on mouseover. I am unable to do so with though with my limited knowledge and google isn't able to help me this time. I'd like to ask for your help on how I am going to be able to do this. I tried some codes that I found on google but they dont work. I have no knowledge of JS btw. Thanks!
Update: thanks for the help of Jan Kees, I was able to accomplish the goal however, there is a problem. here is my current code:
.add-2-cart {
max-width: 60%;
margin-left: auto;
margin-right: auto;
padding-left: 0%;
padding-right: 0%;
transition: .5s ease;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
.add-2-cart:hover {
transform: scale(1.1);
}
<div class="add-2-cart col-flex-fullwidth">
<a href="https://www.digistore24.com/product/394232" target="_blank">
<img src='images/a2c-1btl-am.png' onmouseover="this.src='images/a2c-1btl-amh.png'" onmouseout="this.src='images/a2c-1btl-am.png'" class="fluid-img">
</a>
</div>
Now the problem is the image change does not immediately take effect. I need to hover multiple times on the image before it actually works properly.
That's using the adjacent sibling combinator (+).
.image {
height: 100px;
}
.btn {
padding: 10px;
background: orange;
width: 50px;
}
.image:hover+.btn {
background: red;
}
<img class="image" src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg">
<div class="btn">button</div>
</img>
OR
if the whole card is an image you can change the content in the css.
img {
height: 150px;
}
img:hover {
content: url("https://tryslimleaf.com/d24/images/a2c-6btl-amh.png");
transform: scale(1.1);
}
<img src="https://tryslimleaf.com/d24/images/a2c-6btl-am.png">
Related
This is an example of the page: link
My problem here is that the images rendering changes to be like "image-rendering: pixelated;" while the image is resized (when you hover some image), and when the resize over it changes back to normal.
(You can see this very clear when you hover Youtube for example)
I don't want it to be pixelated, and want the image rendering to be normal through all the mouse-hover.
This is my HTML (Made with React):
<li className="original-icon-li">
<a href={props.hrefProp}>
<img src={"/images/classicLogos/" + props.imageUrl} alt={props.imageUrl} />
</a>
</li>
And the CSS:
.original-icon-li {
margin: 10px;
display: inline-block;
transition: all .5s;
}
.original-icon-li a {
padding: 5px;
display: inline-block;
border: none;
transition: all .5s;
}
.original-icon-li a img {
width: 90px;
height: 90px;
display: block;
transition: all .5s;
}
.original-icon-li a:hover img {
transform: scale(0.88);
}
What do you think is the problem ?
Working with a project and I am trying to place a button inside a img title field. I am using boxslider and I am trying to place a href link to the button, but can't get it to work.
img src="images/1.jpg" title="asdad asd adad < button >Test< /button >" alt=""
As soon as I type in href="#" to the < button href="#" > , it wont work.
Anyone know another solution for this problem?
See live exampel: https://adamskymotorkylare.se/beta/ProjectX/
No, it's not possible. Declaring a tag inside the attribute of another tag is illegal. It will never be parsed as tag, but as string.
I assume you want your <img> to function as a button. That can easily be achieved using an anchor (<a>) or button (<button>) tag as a wrapper for the <img> tag:
<a href="#">
<img src="...">
</a>
If you want to place a link inside the title attribute of an <img> simply put, it's not possible. In order to achieve something that resembles this, you need to wrap the image inside a positioned parent and add a tooltip that looks like a title but, in fact, is a proper DOM element displayed when you hover the parent, containing whatever other DOM elements you want, including links.
Basic example (proof of concept):
.parent {
position: relative;
}
.tooltip {
display: inline-block;
max-width: 300px;
border-radius: 6px;
background-color: rgba(255,255,255,.85);
padding: 1rem;
box-sizing: border-box;
position: absolute;
top: 3rem;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
opacity: 0;
transition: opacity .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.tooltip:before {
content: '';
position: absolute;
left: calc(50% - 12px);
bottom: -25px;
width: 1px;
height: 1px;
border: 12px solid transparent;
border-top-color: white;
opacity: .85;
}
.parent > img {
width: 100%;
height: auto;
}
.parent:hover .tooltip {
top: 2rem;
opacity: 1;
}
<div class="parent">
<div class="tooltip">This is a tooltip wannabe with a link.<br />You can go ahead and style it up so it looks more like a tooltip, or you could look into existing tooltip or popover plugins/libaries and use something that's tested cross-browser/cross-device. <br />
Intended as proof of concept.
</div>
<img src="https://source.unsplash.com/random/800x500">
</div>
For a web project, I would like to create an animated logo in the top left corner of a website. The logo should animate when the visitor is hovering over it, i.e. when not hovering, the logo should display the abbreviated version of the website's name and on hovering it should animate into the fully spelt out version of the name. Here's a quick demo was done in After Effects which shows what I would like to achieve:
The only time I have ever seen something like this was on this website http://ourplace.studio/, the site of a design studio called 'Our Place', in the top left corner. The logo animated pretty much the same way when hovering over it. But looking into the website's source I could not figure out how it is done. The logo is inside a <div> with an <a> tag which has been assigned a class called animation-link. That is as far as I got.
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animaition-link">
<span>Our</span> <span>Place</span>
</a>
</div>
It would be fantastic if someone could help me to figure this out. It would be a good learning experience to understand how something like this is done.
You can achieve this using css3 transitions:
transition: width 1s;
I made a fiddle that solves your task: https://jsfiddle.net/jmxLrq4m/
Note that this won't work with dynamic width (width: auto) as the transition needs a fixed start- and end value to animate through. Therefor I gave each span a class and set fixed widths on default and on hovering.
The transition attribute combines all transition-properties, which you could also separate e. g.
transition: width;
transition-duration: 1s;
...
See here for more information about transitions: https://www.w3schools.com/css/css3_transitions.asp
i have made a fiddle for you, i hope that works for you
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animsition-link">
<span>O<i>ur </i></span><span>P<i>lace</i></span>
</a>
</div>
div#logo a {
font-size: 40px;
color: #333;
text-decoration: none;
}
div#logo span {
transition: all .3s;
overflow: hidden;
display: inline-block;
float: left;
}
div#logo i{
font-style: normal;
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
transition: all 1s;
}
div#logo:hover i {
max-width: 200px;
}
Hi please check this demo here
https://jsfiddle.net/JentiDabhi/83auj9v8/
HTML:
<div id="logo">
<a href="#" class="animsition-link">
<span>Demo</span><span>Logo</span>
</a>
</div>
CSS:
#logo {
width:210px;
font-size: 40px;
}
#logo span {
display: inline-block;
float: left;
margin-right: 0;
overflow: hidden;
}
#logo span {
transition: all 1s ease 0s;
}
#logo span:nth-child(1) {
padding-top: 1px;
width: 28px;
}
#logo span:nth-child(2) {
padding-top: 1px;
width: 22px;
}
#logo:hover span:nth-child(1), .hmslider-visible #logo span:nth-child(1) {
padding-top: 1px;
width: 100px;
}
#logo:hover span:nth-child(2), .hmslider-visible #logo span:nth-child(2) {
padding-top: 1px;
width: 100px;
}
I'm having trouble getting these two images lined up where I want them - I'm trying to do a grid style-display but for some reason (despite using display: inline) the images are appearing on separate lines.
I tried editing the width of the "figure" element (since I guessed that was what the problem was) but it just shrunk everything down instead of what I wanted - could anyone help me out?
HTML
<div id="blade" class="tab-content">
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<figcaption class="item_price">$17,000</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<figcaption class="item_price">$1,682</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
</div>
CSS
.mini-img {
width: 20%;
cursor: pointer;
}
.builder {
height: 20%;
text-align: center;
padding-bottom: 10px;
width: 50%;
}
.builder fieldset {
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.builder fieldset legend {
text-align: left;
}
.tab-content {
margin-top: 10px;
}
.tab-content #simpleCart_shelfItem {
display: inline;
}
.tab-content #simpleCart_shelfItem .item_name {
display: none;
}
.tab-content #simpleCart_shelfItem figure {
width: auto;
}
I was trying to achieve a sort of "caption" effect under each separate image, but I still wanted the images lined up in a sort of "grid" format - I got the first part done (obviously) but it's the second part that's giving me trouble. I was hoping to avoid using a table, but I'm not sure if that would be more suited for this or not.
jsFiddle
I don't know what all that crazy code you've got is, but this is how I would do it. I understand you probably have all those classes for a reason, but could you consider simplifying, it will make your life easier, and make you a better coder.
HTML:
<div>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<p>$17 000</p>
</div>
<div>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<p>$3500</p>
</div>
CSS:
div {
float: left;
margin: 10px;
}
p {
margin-top: 5px;
}
img {
width: 200px;
}
http://jsfiddle.net/eshellborn/g2xcr/18/
You are using the same ID for two DIV's which isn't valid HTML.
Can you instead of using percentages for your image tag use pixels instead. I changed the CSS to the below, adding float, and removing the other CSS.
.mini-img {
width: 100px;
cursor: pointer;
}
.tab-content {
margin-top: 10px;
}
div.simpleCart_shelfItem {
float: left;
}
JSFiddle Example:
http://jsfiddle.net/g2xcr/1/
I have some links to my facebook and twitter, these links are images. I want these links to turn lighter when I hover over them. I was thinking I could do this by making two images and making the images change when I hover over the image link. Is this the best way to do it and if it is how do i do it? I couldn't find any help on how to do it this way.
Here is my HTML:
<div class="social">
<a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
<img src="../img/facebook_logo_extended.jpg"/>
</a>
</div>
<br>
<div class="social">
<a href="https://twitter.com/SethUrquhart">
<img src="../img/twitter_logo_extended.jpg"/>
</a>
</div>
Here is my CSS:
p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}
ul {
text-align: center;
color: gray;
}
ul a {
text-decoration: none;
color: black;
}
ul a:hover {
text-decoration: underline;
margin-right: auto;
margin-left: auto;
}
html {
background: #e8e9e1;
}
h1 {
text-align: center;
}
body {
font-family: sans-serif;
color: #232323;
}
.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.content {
background: #ffffff;
width: 900px;
margin-left: auto;
margin-right:auto;
height: auto;
text-indent: 50px;
}
.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}
.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
ul#list-nav {
padding: 0;
list-style: none;
width: 605px;
margin: 0 auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
Assuming you're willing to use CSS3, I created an example showing one way to get a brief widening effect for the icons (I suppose that is what "dense" means in the question). Reduced code here:
.icon {
-webkit-transition: 0.25s;
transition: 0.25s;
}
.icon:hover {
position: relative;
z-index: 1;
transform: scale(1.7);
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari and Chrome */
}
The transform property has good support. The effect with transition isn't so well supported (no IE9 support), but if you are thinking on graceful degration, I think it's quite valid to use that.
EDIT
I'm updating this answer because it could help other people in future. The accepted answer isn't the right approach, since it's using obtrusive JavaScript to do things about styling, where CSS is the right tool. I really hope the OP will take a look here and change their code.
Based on the OP's feedback, I updated the example showing how to get a brightness effect simulated by changing the opacity property with a fallback using filter for IE6-8. In short, here's the code:
.icon {
opacity: 1;
filter: Alpha(Opacity=100);
}
.icon:hover {
opacity: .6;
filter: Alpha(Opacity=60);
}
It's easy and works very well when the parent's background-color is lighter than the element. If you need something more elaborated (if you really want changing between two images), I really suggests you to use CSS sprites.
I don't know what you mean by dense, but you can alter any image property via the onmouseover and restore it with onmouseout. Here's a code snippet to show how to do it. This code simply makes an image dimmer when the mouse is over it, then restores it when the mouse leaves:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.opacity=0.5"
onmouseout = "document.getElementById('test').style.opacity=1" />
If you wanted to make the images bigger on the hover, you'd change any of the size attributes. For instance, here's a particularly dramatic size jump:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.width='75%'"
onmouseout = "document.getElementById('test').style.width='50%'" />
Please note that the above is for illustrative purposes only. There are other ways of doing this, and I am not saying the way I presented is the best or even a good one. However, it's clear and I just want you to clearly see how this can be done.
The simpliest solution would probably for you to use background-images rather than images so you can just switch between them. You can even go as far as creating 3 states this way.. inactive, hover, and selected..
Consider cascades and specificity.. If you define your inactive state first, hover state is defined second overwriting the same definitions, selected state is defined last, again with the same definitions and level of specificity. Now each will overwrite the other in the appropriate or they will happen.
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }