We Keep Coding

How to configure the bootstrap image?

I inserted an image into a tag by giving it a class of .img-circle. Now the circle that it yielded is too small and I want to increase the radius.
I even tried giving the <img> tag an attribute of width="35px", but the image circle did not change.
Please, suggest CSS3 methods or with jQuery.

img-circle Bootstrap class only formats the border in such way that it takes the circle form:
.img-circle {
border-radius: 50%;
}
It does not affect the size of your image at all.
You only need to increase your image and this "circle" will increase with it.
Here is the example with three images of type img-circle with different sizes described by CSS classes or inline styling:
.big-image {
height: 100px;
width: 100px;
}
.small-image {
height: 64px;
width: 64px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<!-- Original square image -->
<img class="big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Big circle image with CSS class rule -->
<img class="img-circle big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Small circle image with CSS class rule -->
<img class="img-circle small-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Circle image with inline style -->
<img class="img-circle" style="height: 16px; width: 16px;" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>

display a different, larger photo on mouseover

Usually i'm here for help with a JavaScript class that I just started, but this on is for a personal project that I'm working on. I have code (see below) that will increase the size of a photo on mouse-over, and it works fine.
Problem is, I want to not only display a larger image but for one of these I'd like to also display a different image completely on mouse-over (and yes, still at a larger size too!).
This is what I've been working with but can't seem to get it to work correctly (the first image is a "before", and the second is an after Photoshop enhancement with both before/after side by side). Any help is greatly appreciated. Thanks...
<p><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarcompare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></p></div>

Maybe something like this?
<div>
<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg"
width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src='Images/sheriffcarcompare.jpg';this.width=1100;this.height=350;" onmouseout="this.width=250;this.height=150"/></a>
</p>
</div>
WORKING DEMO
In the Demo wait for a secong over you hover over the image for the image src to change. This happens only because the src is a 3rd party website. It will work perfectly in your case

You can do this without using javascript at all... The :hover CSS selector is similar to the onmouseover javascript event.
<style>
a img.Large { display: none; }
a:hover img.Small { display: none }
a:hover img.Large { display: block; }
</style>
<a href="your link">
<img class="Small" src="Images/sheriffcarB4.jpg"
width="250" height="150"
alt="Photoshop Enhancement" />
<img class="Large" src="Images/sheriffcarcompare.jpg"
width="1100" height="350"
alt="Photoshop Enhancement" />
</a>

See this Fiddle
Html
<a href="#">
<img class="actul" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
alt="picSmall" />
<img class="another" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT7cjWFiYeCohI7xgGzgW60EHd-kEJyG3eNEdJJhnhp7RFT6o6m" width="600" height="350"
alt="picLarge" />
</a>
Css
a img.another { display: none; }
a:hover img.actul { display: none }
a:hover img.another { display: block; }

Create a small color box in html

I have a li element. Inside the li element there are many elements like input, labels.
I want to put now a small color inside each li. The color will be provided dynamically. I want to have something square and on page load it fills with the color i provide. Is there something already existing?

Are you looking for something like this?
HTML
<div class="input-color">
<input type="text" value="Orange" />
<div class="color-box" style="background-color: #FF850A;"></div>
<!-- Replace "#FF850A" to change the color -->
</div>
CSS
.input-color {
position: relative;
}
.input-color input {
padding-left: 20px;
}
.input-color .color-box {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 5px;
top: 5px;
}
See jsFiddle for live example.

Disclaimer: I'm not familiar with CSS.
I became annoyed with nuances of CSS and not getting the look and feel quite right and figuring out different configurations of div's. I stumbled on to something much simpler (to me and hopefully others): use SVG.
Here's an example of a yellow-box:
<html>
Look at me - I'm a yellow box!
<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</html>
When used with a jinja template I can configure the fill color by supplying the correct string from python:
<svg width="20" height="20">
<rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
It's old school, but it's simple and gets the job done.

Displaying text over an image with javascript

I am looking for a JavaScript(or anything really) framework that can add text with a semi opaque background to images. I am also wanting something with simple mouse over support. I've seen some that use solely css but wont work in my case due their use of multiple images (My images are hi res and I don't want to waste bandwidth). Another I found worked but created invalid code and added too much to load times. Is there a framework out their or am I just going to have to code my own?
Thanks

<div style="position: relative; height: 200px; width: 200px;">
<img src="something.jpg" width="200" height="200" alt="Your Image" />
<div style="position: absolute; height: 200px; width: 200px; left: 0; top: 0; line-height: 200px; vertical-align: middle; opacity: 0.5;">Your semi-opaque text</div>
</div>
going off the top of my head, but wouldn't something like that do the trick?

roll over effect, show another image

I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}

**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>

Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}

Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.

You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.