javascript - half borders at top right corner and bottom left corner with css -



javascript - half borders at top right corner and bottom left corner with css -

i have few images i'd half borders top right corner , bottom left corner. problems running are:

problem 1: have managed cutting of borders @ 4 corners, can't cutting of top left , bottom right. code below (i'm using fiddle provided killacam, , experimented little, result 4 corners appear @ first , 3 of them disappears! : http://jsfiddle.net/3jo5btxd/

#div1 { position: relative; height: 100px; width: 100px; background-color: white; border: 1px solid transparent;transition: border 2000ms ease 0s; } #div2 { position: absolute; top: -2px; left: -2px; height: 84px; width: 84px; background-color: #fff; border-radius: 15px; padding: 10px; }

problem 2 have panel has link vertically centered using css table method, visible on hover. when combine panel's code corner borders, vertical centering goes out of whack! guess happening because of div using borders, haven't managed create corners :before (doesn't work on hover). html , css below , image showing want make:

<ul class="img-list"> <li class="category_lists one-third column-block" '=""> <a href="http://kohphangan.smartsolutionpro.us/category/adventure/"> <img src="something.jpg"/> <span class="text-content"> <span>adventure</span> </span> </a> </li> <li class="category_lists one-third column-block" '=""> <a href="http://kohphangan.smartsolutionpro.us/category/beach-2/"> <img src="something2.jpg" /> <span class="text-content"> <span>beach</span> </span> </a> </li> </ul>

css:

/*css categories on home page*/ .img-list{margin:0;padding:0; list-style:none} ul.img-list li { display: inline-block; height: 20em; margin: 0; position: relative; } .category_lists.one-third{width:33%; margin-left:0;} .category_lists img{width:100%; height:auto;} span.text-content span { display: table-cell; text-align: center; vertical-align: middle; } span.text-content { background: rgba(38,196,83,0.7); color: white; cursor: pointer; display: table; height: 7em; left: 0; position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; font-size:42px; text-transform:uppercase; font-family: 'raleway', sans-serif; font-weight:300 } ul.img-list li:hover span.text-content { opacity: 1; }

and image showing want make: http://tinypic.com/r/2gy5zk4/8 .

if have utilize javascript, will, not @ it, counting on css create work. lot help.

here's 1 solution: http://jsfiddle.net/f7u6yxlq/.

html:

<div></div>

css:

* { margin: 0; padding: 0; } body { padding: 10px; } div { position: relative; display: table; width: 200px; height: 100px; background: url("http://placehold.it/200x100") no-repeat top left; } div:before, div:after { content: ""; position: absolute; width: 50px; height: 50px; border: solid white; border-width: 2px 2px 0 0; display: none; } div:before { right: 5px; top: 5px; } div:after { border-width: 0 0 2px 2px; bottom: 5px; left: 5px; } div:hover:after, div:hover:before { display: block; }

javascript jquery html css css3

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more