Develop Reference

Make button 200% bigger

I have YoutuTube button with counter on my website: www.lukas-tv.pl
I mean button under: "Prawie 200 000 sybrybcji!"
I'd like to make this button 200% bigger and center it. Could you help me?

This is a nice solution. I recommend to you study a little bit of CSS.
.apsc-theme-3 .apsc-each-profile {
display: inline-block;
margin: 5px;
transform: scale(2);
}

Overlay/fade in a div/text when hovering over an image

I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.
I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.
I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.
My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.
document.getElementById("imageBox").onmouseover = function() {
imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
document.getElementById("imageBox").parentNode.removeChild(image);
document.getElementById("imageBox").add(textHere);
};
The above doesn't work, and my other ideas would be based off of the initial one, for example:
-instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect
-or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?
Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!

Here's an example with CSS using :hover to transition the opacity of your text element.
.wrap {
display: inline-block;
position: relative;
padding: 1em;
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
background: rgba(0,0,0,0.8);
color: #fff;
transition: opacity .5s;
opacity: 0;
position: absolute;
top: 1em; bottom: 1em; left: 1em; right: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap:hover .text {
opacity: 1;
}
img {
max-width: 100%;
display: block;
}
<div class="wrap">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text">text overlay</div>
</div>

Using client-testimonials-carousel plugin, having the arrows not move

I'm using this plugin and it works perfectly:
https://codyhouse.co/demo/client-testimonials-carousel/index.html
however I'm not too sure how to get the arrows to stay put and never move. Right now they center themselves based on the height of the div and I just want them to stay where they are instead. If someone could show me what they changed so I can also learn that would be awesome!

You have to change this css:
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
background-color: white;
content: "";
height: 13px;
left: 50%;
position: absolute;
top: 50%;
width: 2px;
}
Change the top: 50%; to whatever you want. Like top: 200px for example.
The top: 50% will get the height of the parent element and move the own element 50% down. This can be disabled by adding a fixed declaration.
If you cant edit the css from your plugin, include your own css-file and paste this into it:
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
top: 200px;
}

Consider sticking with the moving arrows. Reason for suggesting this is that your choice of fixed top position is unlikely to be as pleasing as the centred version. Say you choose
top: 100px;
It will look great for a testimonial that generates a 220px high block because the 100px point is roughly central. But it will look ugly when the testimonial block is 130px high and the arrow is close to the bottom of the block.
Your sample testimonials have either 3 or 4 lines only. Try it with single-line testimonial and a 7 line version and see how you feel about fixing the position.
Its a nice looking site so far - good work.

CSS3 Vertical text banner to left of content

I am no guru when it comes to CSS and I wanted to create a web page layout using CSS only if possible. The layout that I would like is to have two divs, one containing a banner and the other containing the content of the page with the banner to the left of the content. So far easy enough. The banner div contains two sub-divs, one containing the title of the page and the other containing some extra information such as contact information. Once again, not too hard.
The problem arises when I want the text displayed in the title to be vertical, reading from bottom to top. I did some searching around on the web and found the CSS3 transform rotate functionality which does what I want it to do.
#name {
border: solid 1px black;
background-color: yellow;
height: 50px;
font: normal normal bold 40px Helvetica, Arial, sans-serif;
padding: 10px;
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(270deg);
-moz-transform-origin: left bottom;
-moz-transform: rotate(270deg);
-ms-transform-origin: left bottom;
-ms-transform: rotate(270deg);
-o-transform-origin: left bottom;
-o-transform: rotate(270deg);
transform-origin: left bottom;
transform: rotate(270deg);
}
Unfortunately, when it comes to rendering the text in the browser, the space reserved by the browser for the rotated text is the width of the banner text before it was rotated, and not the width of the text after rotation (i.e. the height of the banner text before rotation). Hence my content div is sitting way out on the page when I would like it to be right next to my banner div.
To see what I mean, check out this JSFiddle.
How do I get the two divs to live side by side?
This doesn't haven't to be a purely CSS solution as I think I may have to use JavaScript/jQuery to calculate widths and heights etc. and then move the banner div accordingly, but a pure CSS solution would be nifty.

here's a fiddle: http://jsfiddle.net/sijav/UDfZE/53/
you should do this, make a max-width for #banner,
max-width:170px;
then put display:block-inline to main content too, that should do the trick.

http://jsfiddle.net/UDfZE/55/
float: left
Altered the above fiddle floating one element right the other one left will have them alongside each other.

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>

My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.

Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.

There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.

This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast