- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
ok , i have a list with an image when i hover the a `
here is the code
.circle-list span{
position: relative;
display: block;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
color: rgb(134, 130, 130);
text-decoration: none;
transition: all .3s ease-out;
}
.circle-list span:before{
content: “”;
position: absolute;
left: -3.5em;
top: 50%;
margin-top: -1em;
background: rgb(65, 191, 223);
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
border-radius:50%;
}
.circle-list span:after{
position: absolute;
content: ”;
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.circle-list span:hover:after{
left: -1.2em;
border-left-color: #fa8072;
}
.circle-list span:hover{
color:black;
}
and
image code
.imageFeatures {
float: right;
width: 150px;
height: 150px;
margin-left: 1.5em;
border: 5px solid #fff;
overflow: hidden;
background-color: rgb(255,255,255);
-webkit-box-shadow: 0 0 5px 2px #aaa;
-moz-box-shadow: 0 0 5px 2px #aaa;
box-shadow: 0 0 5px 2px #aaa;
-webkit-transition: border-color 0.5s;
-moz-transition: border-color 0.5s;
-o-transition: border-color 0.5s;
transition: border-color 0.5s;
}
.imageFeatures:hover {
border-color: rgb(64,186,216);
}
.imgFeature {
display: block;
height: 100%;
max-width: 100%;
}
Could you put the HTML/CSS in Codepen with **working** images especially as there are none showing in your CSS.
Here its the HTLM/CSS in Codepen http://codepen.io/seraphzz/pen/mbrLB